接触el-admin

使用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

•  

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本身也是为管理端打造的，所以并不兼容手机端。项目从构建到项目完成两天时间就做完了，相当的快速。以后想偷懒估计都用这个框架了。