1.前期准备

你需要在本地安装 node 和 git。本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui，所有的请求数据都使用Mock.js进行模拟。相关知识需要自己去相关网站学习。

• Node安装地址：

官网下载地址：https://nodejs.org/en/download/    

中文下载地址：http://nodejs.cn/download/

• Git安装地址： https://git-scm.com/ 
• Vue官方网站：https://cn.vuejs.org/
• Element-ui官方网站：https://element.eleme.cn/#/zh-CN/component/table
• Mock.js官网: http://mockjs.com/
• ES6教程：https://es6.ruanyifeng.com/
• axios官网 ：http://www.axios-js.com/

2 安装框架

本项目在 vue-admin-template 的基础上进行二次开发，建议同时安装vue-admin-template和vue-element-admin，把 vue-element-admin当做工具箱或者集成方案仓库，想要什么功能或者组件就去 vue-element-admin 那里复制过来。这样可以避免冗余代码并加快开发速度。

2.1 安装vue-admin-template

启动完成后会自动打开浏览器访问 http://localhost:9528 ， 你看到下面的页面就代表操作成功了。

2.2  安装vue-element-admin

启动完成后会自动打开浏览器访问 http://localhost:9527， 你看到下面的页面就代表操作成功了。

2.3 问题解决

2.3.1安装依赖问题

输入命令npm install --registry=https://registry.npm.taobao.org安装依赖时，如果出现以下错误：

解决方法：

步骤一：执行git config --global url."https://".insteadOf git://

步骤二：再次执行npm install --registry=https://registry.npm.taobao.org

出现以下即安装成功

2.3.2 启动错误

如运行npm run dev 出现以下错误：

解决方法：

步骤一：执行 npm rebuild node-sass

步骤二：执行 npm run dev

2.3.3 浏览器启动两次

运行 npm run dev 浏览器启动两次

解决方法：

步骤一：将vue.config.js文件里面devServer下面的open选项改为open:false

步骤二：在package.json中把scripts下的dev属性配置后面加上—open

步骤三：重新启动

3 目录结构

该开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

4 功能开发

4.1 新增页面

如新增一个excel页面：

步骤一：在src/views 下新建页面文件

一般性一个路由对应一个文件，该模块下的功能组件或者方法就建议在本文件夹下创建一个utils或components文件夹，各个功能模块维护自己的utils或components组件。如：

步骤二：在src/router/index.js中增加你需要添加的路由；

如果 children 下面只声明了一个路由不会有展开箭头，如果children下面的路由个数大于 1 就会有展开箭头。 如果你想忽视这个自动判断可以使用 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由。

新建成功

4.2 多级目录(嵌套路由)

如果你的路由是多级目录，比如有三级路由嵌套的情况下，不要忘记还要手动在二级目录的根文件下添加一个 <router-view>。原则上有多少级路由嵌套就需要多少个<router-view>。

4.3 新增api

写功能模块代码时，api不要直接写在页面中，而要在src/api 文件夹下创建本模块对应的 api 服务。因为随着业务的迭代，模块会越来越多，所以建议根据业务模块来划分 views，并且 将views 和 api 两个模块一一对应，从而方便维护。如下图：

如 article 模块下放的都是文章相关的 api，这样不管项目怎么累加，api和views的维护还是清晰的，对于全区公用的api模块，单独放置就行。

api示例：

4.4 新增组件

在 src/components 下写全局的组件，如富文本，各种搜索组件，封装的日期组件表格组件等等能被公用的组件。每个页面或者模块特定的业务组件写在src/views/当前模块/components/ 下 。如：src/views/article/components/xxx.vue。这样拆分大大减轻了维护成本。

4.5 新增样式

页面的样式和组件是一个道理，全局的 src/style 放置一下全局公用的样式，每一个页面的样式就写在当前 views下面，请记住加上scoped 或者命名空间，避免造成全局的样式污染。

      

5. 与服务端进行交互

5.1 前端请求流程

在本框架中，一个完整的前端 UI 交互到服务端处理流程是这样的：

1）UI 组件交互操作；

2）调用统一管理的 api service 请求函数；

3）使用封装的 request.js 发送请求；

4）获取服务端返回；

5）更新 data；

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 src/api 文件夹中，并且一般按照 model 纬度进行拆分文件。

其中，src/utils/request.js 是基于 axios 的封装，便于统一处理 POST，GET 等请求参数，请求头，以及错误提示信息等。它封装了全局 request拦截器、response拦截器、统一的错误处理、统一做了超时处理、baseURL设置等。

5.2 请求例子

5.3 设置多个baseURL

5.3.1 方法一：设置环境变量

我们可以通过环境变量设置多个baseURL，从而请求不同的 api 地址。

之后根据环境变量创建axios实例，让它具有不同的baseURL。 @/utils/request.js

5.3.2 方法二：直接覆盖

在src/api 中直接覆盖baseURL 

6. mock数据

Mock 数据是前端开发过程中必不可少的一环，是分离前后端开发的关键链路。通过预先跟服务器端约定好的接口，模拟请求数据甚至逻辑，能够让前端开发更加独立自主，不会被服务端的开发所阻塞。

本项目在本地会启动一个mock-server来模拟数据，是完全基于webpack-dev-serve来实现的，所以在你启动前端服务的同时，mock-server就会自动启动。本项目的所有请求都是通过封装的request.js进行发送的，所有的请求都设置了一个baseURL，而这个baseURL又是通过读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的，这样方便我们做到不同环境使用不同的 api 地址。

6.1 移除

如果你不想使用mock-server的话只要在vue.config.js中移除devServer中before这个Middleware就可以了。

注意：移除后需重启服务

6.2 新增

如果你想添加 mock 数据，只要在根目录下找到mock文件，添加对应的路由，对其进行拦截和模拟数据即可。

比如我现在在src/api/user中需要添加一个登录的接口login，首先新建接口：

声明完接口之后，我们需要找到对应的 mock 文件夹mock/user.js，在下面创建一个能拦截路由的 mock 接口

6.3 修改

最常见的操作就是：你本地模拟了了一些数据，待后端完成接口后，逐步替换掉原先 mock 的接口。将mock 的数据切换为真实后端数据，只要在mock下找到对应的路由，将它删除即可。这时候你可以在network中，查看到真实的数据。

6.4 多个server

可以一部分接口走这个服务，另一些接口走另一个服务。

步骤一：只需要将它们分别设置不同的的baseURL即可。 src/utils/request.js

步骤二：之后根据设置的 url 规则在 vue.config.js 中配置多个 proxy 。

6.5 不同环境使用不同的数据

通过设置环境变量来做到不同环境下，请求不同的 api 地址

之后根据环境变量创建axios实例，让它具有不同的baseURL。 src/utils/request.js

本项目中，新增了一个mock环境：

首先在package.json中添加mock脚本

然后，添加环境变量文件

.env.mock

7. 构建和发布

当项目开发完毕，只需要运行一行命令就可以打包你的应用：

构建打包成功之后，会在根目录生成 dist 文件夹，里面就是构建打包好的文件，通常是 ***.js 、***.css、index.html 等静态文件。

如果需要自定义构建，比如指定 dist 目录等，则需要通过 config的 outputDir 进行配置。

8. 其他

本项目开启了eslint，运行npm run lint -- --fix 自动修复一些简单的错误