2.1　前端安装指南

本系统前端使用Vue.js和Element框架搭建，基于NPM环境开发，所以在开发之前，需要先安装Node.JS，开发工具为Visual Studio Code，当然读者也可以根据自己的喜好选择其他开发工具，比如说WebStorm，具体开发环境的搭建请参考后续章节：前端实现篇◎搭建开发环境，这里着重说明以下现有源码的安装和运行。

2.1.1　开发环境

前端开发环境基于NPM环境，使用VS Code开发。

2.1.2　技术选型

前端技术主要使用Vue.js和Element UI框架。

2.1.3　项目结构

前端项目结构如下：

2.1.4　编译运行

编译运行步骤说明如下。

（1）获取源码。获取前端源码，整个前端只有一个工程mango-ui，将其备份放置到本地目录。

（2）编译源码。在mango-ui目录下打开CMD终端，执行npm install，下载和安装项目依赖包。

（3）启动系统。执行npm run dev命令，启动项目，启动之后通过http://localhost:8080访问。

（4）项目打包。执行npm run build命令，进行前端项目打包，打包完成之后会生成dist目录。

将生成的目录直接放置到如Tomcat之类的Web服务器，启动服务即可访问。

（5）Mock开关。本系统采用前后端分离架构，前端若开启Mock模块，则可模拟大部分接口数据。

通过修改src/mock/index.js中的openMock变量，可以一键开启或关闭Mock功能。

（6）修改配置。如果想自定义端口（默认是8080），可以修改config/index.js下的port属性。

后台接口和备份服务器地址配置在src/utils/global.js，如有修改请做相应变更。