携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第9天，点击查看活动详情
上一篇文章中我们完成了Element-ui组件库的引入，接下来我们就要使用里面的组件去搭建我们的项目了。
- 首先我们的项目是Header,Aside,Main的一个布局，我们先找到Element-ui里面的container容器布局，具体的网站链接：element.eleme.cn/#/zh-CN/com… ，然后我们使用的是如下图所示的总体布局
然后我们找到相应的代码将其复制下来。然后粘贴到App.vue这个文件的template里面，所以可以看出，在我们的App.vue文件里面需要使用到Header,Aside，Main这三个组件。
- 所以我们现在companies文件夹里面创建好这三个组件，然后逐一引入并且注册到App.vue这个文件中，具体的代码如下图所示：
这里的container我设置了高度为100%，宽度自适应。
- 然后我们先写CommonHeader.vue这个组件，我们头部组件里面的内容是一个首页的图标，一个首页文字以及一个用户头像组成，点击用户的头像，会下拉出个人中心和退出，点击那个首页的图标会把左边的Aside遮蔽，如下图所示：
- 那个首页图标就使用组件库中的button按钮，里面的图标换成首页的样子并且设置为镂空的样式，绑定一个折叠的事件，具体的代码如下所示：
<el-button
@click="handleMenu"
plain
icon="el-icon-menu"
size="mini"
></el-button>
5.之后这里要用到面包屑，组件为Breadcrumb 面包屑，显示当前页面的路径，快速返回之前的任意页面。具体链接： element.eleme.cn/#/zh-CN/com…
