Vue3+Element-Plus 主页布局功能功能开发 二二

1.最终布局效果

 2. 布局分析：先上下划分，再左右划分

 3. 整个主页布局需要使用到element-plus 里面的一些布局组件  ，分别是：

1. <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
2. <el-header>：顶栏容器。
3. <el-aside>：侧边栏容器。
4. <el-main>：主要区域容器。

Container 布局容器 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/container.html

4. 页面布局代码实现

4.1 布局参考，不需要自己考滤应该怎么去实现或设计布局，高效率的做法是直接去官网复制一个合适自己项目的布局进行改造。如图，这个就比较符合我们项目页面的布局要求

官网
Container 布局容器 | Element Plus (gitee.io)https://element-plus.gitee.io/zh-CN/component/container.html#%E5%B8%B8%E8%A7%81%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80

 4.2 找到合适的布局框架后，复制该布局框架的页面代码

    <el-container>
      <el-header>Header</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>

4.3 首先导入布局组件

因为页面是按需引入，所以每添加一个页面，页面里面有新的组件时，需要在element.js 引入相关组件。

4.2 element.js 按需引入

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElMessage,
  ElContainer,
  ElHeader,
  ElAside,
  ElMain
} from 'element-plus'
export default (app) => {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
  app.use(ElRow)
  app.use(ElContainer)
  app.use(ElHeader)
  app.use(ElAside)
  app.use(ElMain)
  app.config.globalProperties.$message = ElMessage
}

 4.3 为Header,Aside,Main 组件添加背景颜色

1. 首先如何取出对应的背景颜色，可以使用一个小工具 FSCapture取色器

前端必备：FSCapture取色器_希望你会喜欢-CSDN博客https://blog.csdn.net/qq_45538469/article/details/1042418162. 下载安装完成后打开，直接使用该工具进行取色

 3. 点击取色按键，把该取色针管放在需要取的颜色上，按下完成取色

 4.取色完成

 5.如若没有显示取色针管，打开设置

 6.勾选取色针管

 4.4 通过类选择器为组件添加背景颜色

注意，如何获取到类选择器。每一个Element-plus 中提供的组件，它的组件名称就是它的一个类名。也就是相当一个类选择器。

4.5 效果如图，但是并没有并占全屏。

 1. 如上图，如果遇到页面没有撑满全屏的情况。首先需要做的是，检查一下页面元素。看看是那个元素没有占满全屏，导致的。

 2. 通过检查发现， el-container 就是最外层的容器。那基本就是，让它全屏了，基本就能实现整个页面的布局效果了。

小技巧：在设置100%的时候一直没有生效。原因是，它的父元素没有高度的话，直接给子元素设置高度是没有作用的。所以给父 div 添加一个高度值，子元素的高度值就生效了 

以上出自：【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=30