使用vue-element-admin 写用户管理端
- 框架github地址
https://www.bilibili.com/video/av19235761?from=search&seid=14657848923029564329
最近公司接到的项目里面需要快速开发，选了GitHub上面star相当多的一个vue管理后台，用了一下，感觉相当的不错，比我自己做的管理端真的不是差一丁半点（尴尬状！），这个题外，这个后台确实很方便，该有基本都有了，权限管理，各种表格，各种组件都是开箱即用。感觉非常成熟，值得深度学习。
1、项目初始化
项目的提供了非常简洁的模板和一个集成所有组件的demo
可以分别clone下来进行分开运行进行对照开发
初始化方法我从官方copy下来
集成模板下载 vue-element-admin
# clone the project
git clone https://github.com/PanJiaChen/vue-element-admin.git
# install dependency
npm install
# develop
npm run dev
基础模板下载 vueAdmin-template
# Clone project
git clone https://github.com/PanJiaChen/vueAdmin-template.git
# Install dependencies
npm install
# serve with hot reload at localhost:9528
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
2、项目权限问题和路由页面问题
这次开发的项目比较小，没有权限管理，使用的cookie,session保存验证信息，我把权限管理的文件全部注释掉了。其他类似登录过期的时候都自己使用代码来实现跳转。
路由的页面这里和平时vue-cli脚手架的架构的项目不太一样。它的路由页面设置在route文件夹里面的index文件。
在这里就可以设置了路由的页面路径，和路径名称，
{
path: '/',//路由的父级路径，就是地址栏上面后面的尾缀
component: Layout,//所在页面组件，这个可以填默认，layout是外部的框架，就像frame层吧。
redirect: '/person/index',//可选，是否重定向
name: 'person',//路由名称
hidden: true,//这个属性就不太清楚，晚点我再看看吧
children: [{
path: 'index',这里的是子组件的路径，是跟在父组件后面的尾缀
component: () => import('@/views/table/index')这个是/person/index所访问的路由页面路径，在这里设置你的路由页面路径，
}]
},
3、页面的具体操作
其实按照他模板的具体模板代码就能知道具体怎么使用，跟普通的vue的项目是一样的，使用的element UI ，具体的各个组件按照他那个集成的管理端的各个组件或者直接查看element ui的框架的API，可以快速上手。
因为element UI本身也是为管理端打造的，所以并不兼容手机端。项目从构建到项目完成两天时间就做完了，相当的快速。以后想偷懒估计都用这个框架了。最近也找个时间写一个自己UI框架和管理框架。
这个框架相当的成熟了，很多东西都相当值得学习，以后慢慢更新。