1. 背景
由于一般的网页布局，也就是分个侧边导航栏，顶部标题栏，中间内容区域，以及底部版权信心栏。
element为了方便开发人员使用，直接提供了布局容器组件，可以很方便的直接生成上述的布局栏。
2. 全局样式
为了让网页的布局占满屏幕，一般在开始布局之前，设定下全局样式，修改index.html，添加全局样式代码如下。
<style> html,body,#app{ height:100%; margin: 0px; padding: 0px; } </style>
3. 布局代码
通过如下几个标签设置布局即可：
<el-container>：外层容器。当子元素中包含<el-header>或<el-footer>时，内部子元素会垂直排列。针对其他元素，则会水平排列。
<el-header>：顶部栏容器。
<el-aside>：侧边栏容器。
<el-main>：内容区域容器。
<el-footer>：底部栏容器。
我们开发一个页面如下：
<template> <el-container> <el-aside style="width:180px;"> </el-aside> <el-container> <el-header>XX管理系统</el-header> <el-main>内容区域</el-main> <el-footer>版权所有</el-footer> </el-container> </el-container> </template> 为了便于区分各个区域，我们设置样式如下： <style scoped> .el-container { height: 100%; } .el-header, .el-footer { background-color: #b3c0d1; color: #333; text-align: center; line-height: 60px; } .el-aside { background-color: #d3dce6; color: #333; text-align: center; line-height: 200px; } .el-main { background-color: #e9eef3; color: #333; text-align: center; line-height: 160px; } .el-menu { background-color: #d3dce6; } </style>
4. 增加导航菜单
左侧内容区域可以添加导航菜单，由于导航菜单不是本节讲解内容，所以只是给出示例：
<el-aside style="width:180px;"> <el-menu> <el-submenu index="1"> <template slot="title"><i class="el-icon-message"></i>导航一</template> <el-menu-item index="1-1">菜单1</el-menu-item> <el-menu-item index="1-2">菜单2</el-menu-item> <el-menu-item index="1-3">菜单3</el-menu-item> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-menu"></i>导航二</template> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-setting"></i>导航三</template> </el-submenu> </el-menu> </el-aside>
5. 小结
element封装的布局容器足够简单了，说实话感觉没法更简单了。
如果在使用element时，建议直接采用官方提供的布局容器组件，这样兼容性和稳定性会比较好。
