【本节目标】首页结构布局
一个页面，是由很多小部分组成的，比如左侧，顶部，右侧，底部这种不同的区域。
在elementUI中，提供了很多默认的布局，比如：布局容器<el-container>
这个 <el-container> 是最外层的容器。内部可以放很多小容器，比如左侧边栏<el-aside> 做菜单比较好。<el-main> 主要容器部分放工具列表。
你不用担心他们的位置和交互。他们都是已经自动写好了，比如坐标和大小颜色等等。当然你有特殊需求可以改。
我的首页设计就是这样的：
左侧Aside是菜单，Header做成搜索框，Main做成工具列表，Footer做成统计图。
首先，我们先把这个空白的骨架dom层代码写到我们的ToolList.vue中。
然后是style样式，这个不写不好看：
效果如下：
接下来，我们把工具列表的内容 移动到这个Main的地方：
效果如下：
大家可以发现，现在的排列，明显不好看。间距过大。
那么我们接下来就是使用 表格 来承载这些数据就好看了，表格这个组件呢，在elementUI中是这样写的：el-table
而这个表格标签，只需要指定data属性为我们创建的那个列表即可：
里面的每一列的元素标签是 el-table-column
其内的prop就是这个列表的元素字典的某个key，就会自动展示vlaue。
效果如下：
现在大家发现，这些工具只有个名字和创建时间，显然不够。
比如用户要点击进入某个工具的详情页，要怎么办呢？
当然是再增加一列，放进入按钮， 删除按钮，编辑按钮 等等了。。。
也就是要引入elementui的按钮组：<el-button-group>
具体代码：
效果如下：
当然，这三个按钮具体的作用，我们以后再写。
现在还是来美化下首页的前端吧~
欢迎继续收看下一节
