Vue Ant Admin学习笔记，持续记录

Vue Ant Admin 基于 Vue2.x 的中后台管理系统：https://iczer.gitee.io/vue-antd-admin-docs/

比较漂亮的，可以借鉴的：https://vue-admin-beautiful.com/admin-pro

Ant Design of  Vue： https://antdv.com/docs/vue/introduce-cn/（V2 及以上版本为 Vue3.x，以下为 Vue2.x）

Vue Ant Admin 学习记录

1. 文件分析

main.js

各种插件、全局的 CSS、全局的模块在这里引入（如 Vue-Router），程序入口文件，初始化 vue 实例，并引入使用需要的插件和各种公共组件.

App.vue

一人之下万人之上的组件，作为主组件在 main.js 中被使用，主组件 app.vue 调用其他组件，构建页面。app.vue 可以当做是网站首页，是一个 vue 项目的主组件，页面入口文件，所有页面都是在 App.vue 下进行切换的。是整个项目的关键，app.vue 负责构建定义及页面组件归集。

router/index.js

router 里的 index.js 把准备好路由组件注册到路由里；所有路由都从 App.vue 这个层级开始。

vue.config.js 配置项详解

• 通过自定义 webpack 配置项 externals 防止将某些 import 的包 (package) 打包到 bundle 中，而是在运行时 (runtime) 再去从外部获取这些扩展依赖(external dependencies)。

  externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      nprogress: 'NProgress',
      clipboard: 'ClipboardJS',
      '@antv/data-set': 'DataSet',
      'js-cookie': 'Cookies'
  }
  

2.Mock（前端模拟接口）

Mock.js 是一个模拟数据生成器，帮助前端开发和原型与后端进度分离，根据数据模板生成模拟数据，为 ajax 请求提供请求 / 响应模拟。

Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求，不依赖于第三方 Ajax 工具库。

• Mock.mock()，根据规则拦截请求，并返回指定的数据。
• Mock.setup()，配置拦截 Ajax 请求时的行为。
• Mock.Random 是一个工具类，用于生成各种随机数据。
• Mock.valid()，校验真实数据 data 是否与数据模板 template 匹配。
• Mock.toJSONSchema()，把 Mock.js 风格的数据模板 template 转换成 JSON Schema。

相关文档：https://github.com/nuysoft/Mock

3. 路由守卫、axios 拦截器

路由守卫则是处理进度条、检查登录是否失效、检查页面权限。

axios 请求拦截器验证 token 是否失效，响应拦截器则是弹出错误，验证权限、退出登录，实际上就是检查 token 的 cookie。

4. 参数修改记录

1. 路由守卫修改：srcrouterguards.js
2. 登录接口和路由获取接口：srcservicesapi.js
3. 静态路由修改：srcrouterconfig.js
4. 系统的各种配置：srcconfigdefault
5. axios 拦截器：srcutilsaxios-interceptors.js

5.bootstrap.js 分析

main.js 运行时，如果开启了异步路由，初始化的是公共的一些路由，然后在登录时初始化根据用户而匹配出的动态路由，然后合并成为新的路由规则。然后清空当前的路由规则，用异步之后的规则重新初始化。

如果没有开启异步路由，则是在 main.js 运行后除初始化完整的路由。

然后根据异步请求之后的路由生成导航栏菜单。

传递给 bootstrap 的 router 是 vue-router 实例化之后的对象，options返回创建 Router 时传递的原始配置对象（只读）。

• setAppOptions({router, store, i18n})，将已经初始化好的路由、状态管理、国际化赋值到对象 appOptions
• loadInterceptors，设置 axios 的拦截器，并与路由、状态管理进行关联
• loadRoutes，加载用户专用的一些路由。
• loadGuards，加载路由守卫。

/* 用新的规则重置所有路由规则 */
router.matcher = new Router({...router.options, routes: []}).matcher
/* 追加新的路由规则 */
router.addRoutes(finalRoutes)

相关文章：https://segmentfault.com/a/1190000019386190?utm_source=tag-newest

6.Tab 切换（keep-alive）

当组件在 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

7.axios 拦截器和请求 token

token 是在登录之后存到了 cookie 中，到期时间为 json 给的时间，到期之后重新登录，axios 请求时用调用拦截器检测 token 是否过期。

拦截器是在 bootstrap.js 中的 loadInterceptors 批量加载的，在 srcutilsrequest.js 对 axios 进行了相关的参数设置，请求拦截器用于校验 cookie 是否失效，并进行弹窗提示，设置的参数包括 token 校验头，和指定取 token 的 cookie 名字。

axios.defaults.xsrfHeaderName= "AuthHeader"; /* 请求头内字段名 */
axios.defaults.xsrfCookieName= "CookieName" /* 从哪个 cookie 去取值 */

在 login.vue 内登录成功后，触发 setAuthorization 记录登录成功的 Token。

8. 布局

默认是 AdminLayout 布局，顶部由（srclayoutsheader）内的 Logo、avatar、notive、search 四部分组成，logo 在手机端时显示默认图片，pc 端显示组件（srccomponentsmenuSideMenu.vue）；

9. 标题

标题的 Admin 在.env 环境变量内进行设置。

10. 页面是否缓存

meta: {
     icon: 'solution',
     page: {cacheAble: false}
},