使用 Vue 3 + Element Plus 从头开始写一个数据库网站-08-使用动态配置编写组件：以页脚美化为例
由于 PrismJS 尚不支持 Vue 的语法高亮，因此 Vue 代码块均先使用 HTML 的高亮
2024-09-23
在前面，我们为了方便，在根组件 `ADDB/src/App.vue` 中简单写了一个页脚
现在，我们来美化这个页脚
布局上，我们仍然参考 [PubChem](https://pubchem.ncbi.nlm.nih.gov/) 的多列布局，第一列包含组织 Logo、地点、版权声明等信息，其他列包含关于、导航、联系等信息，并为每列添加小标题
编写页脚组件
为了方便以后复用，我们以组件的形式来编写一个 `PageFooter.vue` 文件
新建 `ADDB/src/components/PageFooter.vue` 文件
实现细节
- **列划分：**
- 使用 `flex` 布局，`flex: 1` 让每列平均分布。
- 设置 `min-width: 200px` 确保在小屏幕时列不会太窄。
- **第一列：组织信息**
- 包括 `Logo` 图片、地址、版权声明。
- Logo 样式通过 `.footer-logo` 控制。
- **其他列：关于、导航、联系**
- 每列用 `h3` 标题表示功能区名称。
- 链接用 `<ul><li><a></a></li></ul>` 结构实现，易于扩展。
- **样式优化：**
- 在桌面端，列均分排列；在移动端，通过 `@media` 查询切换为垂直布局。
- **响应式设计：**
- 在小屏幕（宽度 <768px）下，列堆叠显示，保证可读性。
使用组件
在根组件 `ADDB/src/App.vue` 中的 `<script setup>` 中添加
或者
`@` 表示别名，通常指向项目的 `src` 目录。在我们项目的 `vite.config.js` 中通过 `resolve.alias` 定义：
这样做的优点是，即使文件被深层嵌套，不需要写长长的相对路径（如 `../../../`）。此外，当路径修改时，可以避免维护复杂的相对路径。
然后将原来的页脚
替换为
并删去原来的页脚样式，即可看到我们新编写的页脚
动态配置形式的实现
除了第一列，我们的页脚格式都是相似的，因此对于后几列，我们可以共用一个模板，然后通过传入数据来填充
首先修改 `PageFooter.vue` 文件
在 `<script setup>` 中定义列的类型
在根组件 `App.vue` 中，我们在 `<script setup>` 中传入数据
至此，我们已经完成了一个数据库网站的框架。
:cherry_blossom:完结撒花:cherry_blossom:
Loading...
