vue-element-admin基础学习

本文是作者参考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组件,.
加入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"后，效果图如下：

完成项目的基本搭建。