源码地址：https://gitee.com/cheng-xuyuan/blogWeb.git（请忽略这句）
一、整体布局
上下划分，再左右划分。
主体代码：
<el-container ">
<!-- 头部区域 -->
<el-header>
</el-header>
<el-container>
<!-- 侧边栏区域 -->
<el-aside >
</el-aside>
<!-- 右侧主体区域 -->
<el-main>
</el-main>
</el-container>
</el-container>
说明：el-container标签是整个布局容器，el-header标签是容器上方（含“管理系统”的上方部分），el-aside标签是旁边的菜单列表，el-main标签是右边白色区域（后面会设置它显示后端传过来的数据）。
注：相关代码可以直接去Element官网找“Container布局容器”。
实现上述效果的代码(Home.vue组件）如下，后面讲解的内容都在上述代码的基础上进行修改完善：
<template>
<el-container class="home-container">
<!-- 头部区域 -->
<el-header height="50px">
<div>
<img src="../assets/home.png" alt="" width="100px" height="100px" />
<span>个人主页</span>
</div>
<!-- 添加了一个退出按键，并给该按键添加退出事件 -->
<el-button type="info" @click="logout">退出</el-button>
</el-header>
<el-container>
<el-aside width="200px">
</el-aside>
<el-main>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
name: "Home",
data(){
return {
}
},
methods:{
logout(){
window.sessionStorage.clear();//销毁token
this.$router.push('/login');
}
}
}
</script>
<style scoped>
.home-container{
height:100%;
}
.el-header{
background-color: #373D41;
display:flex;
justify-content: space-between;
padding-left:0;
align-items:center;
color:#fff;
font-size:20px;
}
.el-aside{
background-color: #333744;
}
.el-main{
background-color: #eaedf1;}
span{
position: relative;
bottom: 39px;
left:29px;
}
</style>
二、设计左部的侧边栏（设计el-aside标签里的内容）
可以去Element官网找代码：NavMenu导航菜单->侧栏
主体代码：
说明：el-menu标签是整个菜单容器，el-submenu标签表示一级菜单，el-menu-item标签是二级标签。el-submenu标签template标签用于设置该el-submenu标签内的内容的模板，el-menu-item内的template标签也是。
效果如下，点击一级标签，即可自动展开二级标签。
具体设置：
效果如下：
点击文章管理栏：
也可以通过请求后端的返回数据来自动设置多个菜单（使用v-for和:key的指令).
补充一些使菜单栏更美观、体验感更好的技巧：
（1）el-menu标签的active-text-color属性可以设置被选中的二级菜单栏的颜色，可以设置被选中的菜单与其他菜单栏颜色不一致加以区分。
效果如下：
（2）el-menu标签的unique-opened属性设置为true时在展开一个一级菜单时其他已展开的菜单会自动关闭，注意设置为true时unique-opened前加:（分号），不然就设置为字符串了。
（3）可以看出上面的二级菜单展开时会突出，不美观，解决方法是将其边框去掉。
效果如下：
三、实现首页的路由重定向
可以看到现在进入个人主页下方右侧是空白的，可以使用路由来实现变换。
步骤：
（1）在el-main标签里添加一个路由器标签
（2）新建一个Welcome组件
（3）将该组件注册到路由器中，注意这里注册到home路径的子路径中，并使用重定向机制使的默认显示Welcom组件
效果如下：
（4）将el-menu标签的router属性设置为true.
补充：el-menu标签有一个router属性，将该属性设置为true时，点击一个二级目录即会跳转到由根目录+该二级菜单对应的el-menu-item的index属性值组成的路径中。
效果如下：
点击”发布的文章“：
（4）新建要显示的组件，这里以“发布的文章”为例
修改对应el-menu-item标签的index属性（index接下来起到路径的作用）：
在index.js文件中注册：
效果如下：
