本文是作者参考vue-element-admin,一步一步学习如何搭建vue-element-admin.
上图是Vue Admin Template的整体效果图，分析：左侧侧边栏和头部面包屑是一个公用模块，左侧使用的是layout组件，我们也是从最简单的开始着手，第一步，是完善侧边栏layout
第一阶段：搭建项目。
项目使用的是layout+iframe布局.
1.使用vue init webpack VueElement命令行初始化VueElement.
2.cd webpack VueElement
3.npm instll
4.npm run dev
项目在localhost:8080运行起来了。
第二阶段：搭建侧边栏。
侧边栏在layout文件夹
侧边栏使用技术scss+vuex+slot+node+mixins，不懂之处请自行研究。
侧边栏的Logo部分，可显示隐藏，是组件Logo.vue。在layout>components>Sidebar>index.vue中引入组件logo后，页面如下：
Logo的展开和收缩时由src/store/modules/app.js中的opened控制，opened=true表示展开，反之表示收缩。
src/layout/components/Sidebar/Link.vue是控制菜单子项是否是外链和内链，动态控制组件，有用到compoent和slot标签。
src/layout/components/Sidebar/Item.vue是菜单子项（包含icon和title），是函数式组件，用render函数和slot来实现。
src/layout/components/Sidebar/SidebarItem.vue是递归组件，即用递归写的树形控件，此组件引入Link和Item组件，控制菜单的显示和隐藏和多级菜单。
src/layout/components/Sidebar/index.vue组合src/layout/components/Sidebar里面的组件，合并成为一个左侧菜单栏，设置src/store/modules/app.js中的opened为true,效果图如下：
侧边栏的icon使用的是svg，技术是svgo+svgo-loader+svg-sprite-loader src/components/SvgIcon/index.vue是封装的SvgIcon组件.
src/icons/svg是在阿里字体下载的.svg的图标.
src/icons/index.js是注册SvgIcon组件,该文件使用require.context来引进所有的src/icons/svg文件里的图标.
最后，需在main.js中import './icons'，即可全局使用SvgIcon组件,<svg-icon icon-class='table'/>.
加入icon后的效果图：
src/layout/components/Hamburger/index.vue是控制左边侧边栏的展示和收缩.
src/layout/components/Breadcrumb/index.vue是面包屑，需要监听route,this.$route.matched获取的是路由的父路由和当前路由,pathToRegexp.compile填充路由中的参数.
添加Hamburger和Breadcrumb组件后效果图为：
src/layout/components/Navbar.vue 是整合src/layout/components/Hamburger/index.vuesrc/layout/components/Breadcrumb/index.vue是面包屑，并且添加一个右侧的下拉框。添加下拉框后，效果图如下：
完成侧边栏和头部后，下一步是页面的显示。
src/layout/components/AppMain.vue控制的是当前页面的展示，此组件router-view中的key值功能是-是否复用组件。
src/layout/components/index.vue中import { Navbar, Sidebar,AppMain } from "./components"后，效果图如下：
完成项目的基本搭建。
