vue+element UI--Container布局组件

1、基于 webpack 模板生成项目：
基于webpack模板生成项目地址
2、进入项目根目录安装Element UI：
命令：F:>cd F:\VUEworkspace\demo-project

3、修改/src/main.js文件，引入element-ui

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

4、修改/src/router/index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/page/layout'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Layout',
      component: Layout
    }
  ]
})

5、编辑/src/page/layout.vue

<template>
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>Main</el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style scoped>
.el-header {
  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;
}

</style>

Element UI Container 布局容器组件：

组件	说明
el-container	外层容器，当子元素中包含el-header或el-footer时，全部子元素会垂直上下排列，否则会水平左右排列
el-header	顶栏容器
el-aside	侧边栏容器
el-main	主要区域容器
el-footer	底栏容器

以上组件采用flex布局，使用前请确定目标浏览器是否兼容。
此外，el-container的子元素只能是后四者，后四者的父元素也只能是el-container。
6、启动服务npm run dev并预览