vue-element-admin

一. 介绍

vue-element-admin是基于vue技术栈的后台系统社区解决方案 , 是开发后台管理系统的一个比较完备的前端解决方案, 可以快速搭建企业级中后台产品原型

基于 vue 和 element-ui实现
内置了 i18 国际化解决方案，动态路由，权限验证
提炼了典型的业务模型
提供了丰富的功能组件
内部集成了PC项目中很多的业务场景和功能

官网地址 : https://panjiachen.gitee.io/vue-element-admin-site/zh/

线上demo地址 : https://panjiachen.github.io/vue-element-admin/#/dashboard

二. 本地运行

1. 拉取项目代码

// git clone https://github.com/panjiachen/vue-element-admin.git  # 从github上拉取代码
$ git clone https://gitee.com/mirrors/vue-element-admin.git # 从码云上拉取
$ cd vue-element-admin # 切换到具体目录下
$ npm install  # 安装所有依赖
$ npm run dev  # 启动开发调试模式  查看package.json文件的scripts可知晓启动命令

2. 下载过慢问题解决

2.1 git clone 速度过慢或者报错

可以直接下载代码的压缩包运行 : gitee.com/mirrors/vue…

2.2 安装依赖特别慢

可以使用淘宝镜像:npm config set registry https://registry.npm.taobao.org

如果使用yarn下载安装包，就请一直使用yarn，而不要与npm 混在一起使用

3. 小结

vue-element-admin 内置了后台管理业务场景下大部分的解决方案，我们可以在左侧的导航栏里看到它们。这些方案不是每一个项目都需要的，如果我们实际的业务中需要，可以拿来参考，所以它起到的作用更多的是一个参考价值，而不适合直接使用进行二次开发

vue-admin-template

官方文档 : https://github.com/PanJiaChen/vue-admin-template

vue-element-admin是一个非常全面的系统，提供了很多现成的方案，我们可以在写项目的时候过来参考，但是也有缺点：不太好进行二次开发，因为要删减的东西太多了。

我们可以采取另外一个子系统，叫做vue-admin-template ，它提供了最基础的模板，非常方便来做二次开发

在线运行效果：panjiachen.gitee.io/vue-admin-t…

1. 拉取代码

$ git clone https://gitee.com/panjiachen/vue-admin-template.git # 从码云拉取代码 
$ cd vue-admin-template #切换到具体目录下
$ npm install  #安装所有依赖
$ npm run dev  #启动开发调试模式  查看package.json文件的scripts可知晓启动命令

vue-admin-template是在vue-element-admin的基础上做了大量的删减，只保留了后台管理系统最关键的框架部分，非常适合我们在此基础上做二次开发
市面上使用vue技术栈开发的PC后台管理项目很大一部分都是基于vue-admin-template 进行的二次开发，我们的人资项目也基于它来实现。
克隆仓库代码时，可能网络不好，可以直接CV

2. 创建本地项目并关联远程仓库

将vue-admin-template项目改成我们自己的项目，并关联到远程仓库进行管理

2.1 本地项目初始化

由于我们前边下载的项目是直接从 vue-admin-template **克隆**而来，里面拥有原项目的提交记录，为了避免冲突，我们要先删除掉之前的提交，再做初始化。

步骤有三步：

先将vue-admin-template下原来的**.git**文件夹删除掉（这个文件夹默认情况下是隐藏的，如果你看不到这个文件夹，则需要去设置一下显示隐藏文件夹）
修改项目信息
1. 重命名项目文件夹，把vue-admin-template的改成vue-hr(或者其它的名字)
2. 修改package.json中的说明。

项目进行git初始化

$ git init  # 初始化项目, 这句命令会新建一个.git文件夹
$ git add . # 将修改添加到暂存
$ git commit -m "人资项目初始化" # 将暂存提到本地仓库

经过上面的步骤，它就变成我们自己的项目了

2.2 建立远程仓库

在gitee上创建一个与本地同名的、空的、公开的远程仓库

2.3 推送到远程仓库

有两句命令（并不需要记忆，在gitee空仓库中会有具体的提示）

建立关联

$ git remote add origin <远程仓库地址>  #添加远程仓库地址
# git remote add origin https://gitee.com/用户名/项目名.git

推送master分支到远程仓库

$ git push -u origin master
#将master分支推送到origin所代表的远程仓库地址

3. 认识vue-admin-template的目录

一般进入公司后，会有一段时间（1周左右）来熟悉项目

认识vue-admin-template的目录

3.1 认识目录结构

本项目已经生成了一个基本的开发框架，提供了涵盖中后台开发的各类功能和现成目录，下面是整个项目的目录结构

├── build                      # 构建相关
├── mock                       # 项目mock 模拟数据，在接口服务器没有就绪时，临时充当接口
├── public                     # 静态资源
│   ├── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源  不会参与打包  直接直出
│   ├── components             # 全局公用组件 和业务不相关  上传组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout 负责搭建项目的整体架子结构 html结构
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理 vuex管理数据的位置 模块化开发 全局getters
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法 request.js
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面 路由级别的组件
│   ├── App.vue                # 入口页面 根组件
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件
├── tests                      # 测试
├── .env.xxx                   # 环境变量配置
├── .eslintignore              # eslint 忽略文件
├── .eslintrc.js               # eslint 配置项
├── .gitignore                 # git 忽略文件
├── .travis.yml                # 自动化CI配置
├── .babel.config.js           # babel-loader 配置
├── jest.config.js             # 测试配置
├── vue.config.js              # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json               # package.json

此时，你可能会眼花缭乱, 因为生成的目录里面有太多的文件，但是我们要有个基本的认知：

src目录：在做项目时，最关注的就是**src**目录, 里面是所有的源代码和资源
非src目录：一般都是对项目的环境和工具的配置

3.2 认识src目录

├── src                        # 源代码
│   ├── api                    # 所有请求
│   ├── assets                 # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                  # 项目所有 svg icons
│   ├── layout                 # 全局 layout
│   ├── router                 # 路由
│   ├── store                  # 全局 store管理
│   ├── styles                 # 全局样式
│   ├── utils                  # 全局公用方法
│   ├── vendor                 # 公用vendor
│   ├── views                  # views 所有页面
│   ├── App.vue                # 入口页面
│   ├── main.js                # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js            # 配置文件

3.3 熟悉项目的运行机制

整体运行方式

重点文件

main.js

main.js是整个项目的入口文件（webpack中学习的入口文件）

App.vue

App.vue是根组件

permission.js (先把内容注释掉)

permission.js 是控制页面登录权限的文件，在main.js中引入了它

此处的代码没有经历构建过程会很难理解，所以先将此处的代码进行注释，等我们构建权限功能时，再从0到1进行构建

settings.js

对于一些项目信息的配置，里面有三个属性 :

title(项目名称)

fixedHeader(固定头部)

sidebarLogo(显示左侧菜单logo), settings.js中的文件在其他的位置会引用到，我们不用动它

Vuex（把user.js内容注释掉）

当前的Vuex结构采用了模块形式进行管理共享状态，其架构如下

其中app.js模块和settings.js模块，功能已经完备，不需要再进行修改 , user.js模块是我们后期需要重点开发的内容，所以这里我们将user.js里面的内容删除，并且导出一个默认配置

store/modules/user.js

export default {
  namespaced: true,
  state: {},
  mutations: {},
  actions: {}
}

scss

该项目还使用了scss作为css的扩展语言，在styles目录下，我们可以发现scss的相关文件

icons

图标字体使用，icons的结构如下

vue-admin-template创建项目与熟悉目录