初尝vue-element-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

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

---

2019年6月19日更新

  哈哈，太久没更新被吐槽了，最近刚忙完学业和工作的问题，刚抽出空来，抱歉呐米娜桑。
  几个月下来，vue-element-admin 由于vue-cli 3.0的出来也更新了，脚手架的代码结构出现了不小的变化，新的代码结构上用户的自定义配置都在vue.config.js文件里面。简洁了很多东西。
  这里也写一些各个模块的作用，即/src文件夹下的各个模块在项目中的功能。具体的项目如下：

上图中可以看到这些文件夹和文件都是完整的项目目录下面的文件：

• api

该文件是存放项目的请求使用的请求，各个ajax请求的统一管理，统一的模块化和之后的维护的统一规范。好处多多。

• asset

静态资源目录，assert与原来外部的static文件夹的有一个区别是在该文件夹里面的文件会被统一打包编译。而static里面的文件是不会编译的，现在public是原来的static的文件夹,用来存放静态的大文件.

• components

组件目录，用来存放自己需要复用或者封装的组件代码。组件要是不懂要去看一下vue官网看一下文档了，用了就是真香了。

• directive

自定义指令目录

*icons

系统工具使用的图标文件，里面使用是svg的图标文件，图标文件的下载可以去阿里的图标库去下载。这里贴个地址：https://www.iconfont.cn/

• lang

国际化使用的语言包

• mock

模拟数据

• router

vue路由配置模块

• store

vuex,vue的状态管理工具，用来配置一个额外的容器存放变量

• styles

系统的统一样式文件，在管理端这样的CMS系统里面，样式统一管理后，就不需要所有的vue文件都要一个个去敲样式，而且对于一个CMS后台管理系统来说的，大量的代码复用，样式也不例外。这样书写后写下来整个后台项目就相当的快速和舒服了。

• utils

可以复用的一些方法，类似于配置文件，公共方法，我都习惯放置在这个模块下面，给予其他文件来引用调用

• vendor

通常用来存放第三方库

• views

视图层代码，普通vue文件