Vue+ELementUI主页布局----侧边栏布局（el-aside）

第一节Login.vue登录表单知识：

 Element-UI+vue实现登录表单_我爱布朗熊的博客-CSDN博客

具体Element-UI地址：

Element - The world's most popular Vue UI framework
 

目录

一、布满整个页面

二、主页Header布局

三、主页左侧带单布局

四、axios请求拦截器添加token，保证拥有获取数据的权限

五、发起请求获取左侧菜单数据

六、左侧菜单UI绘制

6.1优化一级菜单

6.2当打开一个一级菜单后其他一级菜单关闭

6.3实现左侧菜单的折叠与展开功能

---

一、布满整个页面

如图所示，当我们使用UI库中的组件之后，发现我们导入的组件并不能布满全局，现在我们应该想办法解决

经过我们的筛选，我们发现是因为el-container的原因没有布满全屏，现在我们应该来修改一下

而且这个container就是我们Home.vue组件中最外层的container。

 

因为最外层的container比较特殊，我们特别的给她一个类名

1. class="home-container">
3. <el-header>Headerel-header>
5. <el-container>
7. <el-aside width="200px">Asideel-aside>
9. <el-main>Mainel-main>
10. el-container>

2. <style scoped lang="less">
3. // 标签的名字就是类的名字
4. .home-container{
5. height: 100%;
6. }
7. .el-header{
8. background-color: #373D41;
9. }
11. .el-aside{
12. background-color: #333744;
13. }
15. .el-main{
16. background-color: #EAEDF1;
17. }
18. style>

最终完成我们需要的效果

二、主页Header布局