vue-element-admin目录详解

几个目录的重要含义如下所示:

dist: 构建完成后发布到生产环境的时候复制这个文件夹下的文件即可，html 和JS 默认会混合压缩打包到这个文件夹下。

mock: 模拟后端返回结果请求的API，相当于前端自己写的一个伪后台，提供API请求结果。

node_modules: 依赖类库，相当于我们后端的dependencies 下依赖的各种类库。

src: 我们开发代码的主要目录

环境配置文件

.env.development:配置开发环境的相关配置包括请求后台的API 基地址,类似后端的application-dev.yml

.env.production:配置生产环境的相关配置包括请求后台的API 基地址application-prod.yml

vue.config.js: 配置后台请求基地址和请求代理的地方，因为静态页面和后端代码分离了，涉及到跨域。

package.json: 可以理解成我们后端的pom.xml ，这里还可以配置JS脚本配置，用来简化执行命令。比如刚才启动使用的npm run dev 等价于npm run vue-cli-service serve

api: 前端写Ajax 请求后端API 的地方，这种思想特别好，API与代码分离，管理和复用API就变得方便多了。

components: 可以复用的前端组件，比如分页，markdown 之类的组件，一般是和业务无关的公用组件。

router:路由, 简单来讲就是页面的跳转不再是后端在Controller中通过thymeleaf 控制而是前端自己配置怎么跳转。

views：写前端HTML5页面的地方

permission.js：由于前后端分离，前端需要自己控制权限拦截。比如登陆页面不拦截，其他页面需要登陆才可以访问

网络请求封装

但是在开始将mock的假数据替换为真的接口之前，我们需要先了解这个框架是如何进行网络请求的。

vue-element-admin 为所有的接口请求复用了一个工具类，该文件存在于src/utils/request.js中