【前端8】element ui常见页面布局：注意事项

写在最前面遇到的问题Element UI 常见页面布局：注意事项1. 了解基本布局组件常用的菜单1多一个下角

常用的菜单2

2. 栅格系统的使用3. 响应式布局4. Flex 布局的应用5. 避免滥用嵌套6. 处理边距和填充

小结

写在最前面

Element UI 是一个基于 Vue.js 的组件库，提供了丰富的 UI 组件和布局工具，帮助开发者快速构建美观、响应式的前端页面。在使用 Element UI 进行页面布局时，有一些常见的注意事项，可以帮助你避免常见的问题，并提升开发效率和用户体验。

本文将介绍这些注意事项，帮助你在使用 Element UI 时更加得心应手。

注意，el-container不能嵌套使用

遇到的问题

加了路由跳转后，菜单栏由左边调到了右边，很奇怪

经过测试，发现是子页面的.el-aside没有加<code><style scoped>，导致样式溢出

Element UI 常见页面布局：注意事项

1. 了解基本布局组件

Element UI 提供了许多基础布局组件，如 <code>Container、Header、Aside、Main、Footer 和 Row、Col 等。掌握这些组件的使用方法，是进行有效布局的前提。

Container 容器：用于外层容器布局。Header 头部、Aside 侧边栏、Main 主要区域、Footer 底部：这些都是 Container 里的子组件，负责不同的区域划分。Row 行 和 Col 列：用于栅格布局，Row 包含多个 Col 组件，通过设置 Col 的 span 属性来控制列宽。

常用的菜单1

<el-container>

<el-header>Header</el-header>

<el-container>

<el-aside width="200px">Aside</el-aside>code>

<el-main>Main</el-main>

</el-container>

</el-container>

多一个下角

<code><el-container>

<el-header>Header</el-header>

<el-container>

<el-aside width="200px">Aside</el-aside>code>

<el-container>

<el-main>Main</el-main>

<el-footer>Footer</el-footer>

</el-container>

</el-container>

</el-container>

常用的菜单2

<code><el-container>

<el-aside width="200px">Aside</el-aside>code>

<el-container>

<el-header>Header</el-header>

<el-main>Main</el-main>

<el-footer>Footer</el-footer>

</el-container>

</el-container>

2. 栅格系统的使用

Element UI 的栅格系统是基于 24 格的系统，每一行最多包含 24 个 <code>Col，可以通过设置 Col 的 span 属性来控制每个列的宽度。

<template>

<el-row>

<el-col :span="12">Span 12</el-col>code>

<el-col :span="12">Span 12</el-col>code>

</el-row>

<el-row>

<el-col :span="8">Span 8</el-col>code>

<el-col :span="8">Span 8</el-col>code>

<el-col :span="8">Span 8</el-col>code>

</el-row>

</template>

注意事项：

确保 Row 下的 Col 之和不超过 24，否则会导致布局错乱。使用 offset 属性可以设置列的偏移量，创建间距。

3. 响应式布局