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.参数修改记录
- 路由守卫修改:\src\router\guards.js
- 登录接口和路由获取接口:\src\services\api.js
- 静态路由修改:\src\router\config.js
- 系统的各种配置:\src\config\default
- axios拦截器:\src\utils\axios-interceptors.js
5.bootstrap.js分析
main.js运行时,如果开启了异步路由,初始化的是公共的一些路由,然后在登录时初始化根据用户而匹配出的动态路由,然后合并成为新的路由规则。然后清空当前的路由规则,用异步之后的规则重新初始化。
如果没有开启异步路由,则是在main.js运行后除初始化完整的路由。
然后根据异步请求之后的路由生成导航栏菜单。
传递给bootstrap的router是vue-router实例化之后的对象,options
返回创建 Router 时传递的原始配置对象(只读)。
- setAppOptions({router, store, i18n}),将已经初始化好的路由、状态管理、国际化赋值到对象appOptions
- loadInterceptors,设置axios的拦截器,并与路由、状态管理进行关联
- loadRoutes,加载用户专用的一些路由。
- loadGuards,加载路由守卫。
扩展:
Vue-router对象的Matcher 属性是一个对象,包含了 2 个方法,match 和 addRoutes,不知为何,Vue-router2.x的文档中并未提到这几个接口。
/*用新的规则重置所有路由规则*/
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批量加载的,在\src\utils\request.js
对axios进行了相关的参数设置,请求拦截器用于校验cookie是否失效,并进行弹窗提示,设置的参数包括token校验头,和指定取token的cookie名字。
axios.defaults.xsrfHeaderName= "AuthHeader"; /*请求头内字段名*/
axios.defaults.xsrfCookieName= "CookieName" /*从哪个cookie去取值*/
在login.vue内登录成功后,触发setAuthorization记录登录成功的Token。
8.布局
默认是AdminLayout布局,顶部由(\src\layouts\header)内的Logo、avatar、notive、search四部分组成,logo在手机端时显示默认图片,pc端显示组件(\src\components\menu\SideMenu.vue);
9.标题
标题的Admin在.env环境变量内进行设置。
10.页面是否缓存
meta: {
icon: 'solution',
page: {
cacheAble: false
}
},
相关文章
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- 狂神说Vue笔记整理「建议收藏」
- 尤雨溪:Vue 3 将不会支持 IE11
- 请简述什么是Vue组件化开发_vue组件化开发
- Vue笔记(6)
- 腾讯二面vue面试题总结
- vue JS 对象转数组[通俗易懂]
- VUE学习笔记——es6对象合并 数组转对象
- Vue响应式依赖收集原理分析-vue高级必备
- Vue指令学习 | 零基础入门
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue和vue全家桶有什么区别_Vue和vue全家桶有什么区别
- Vue学习笔记(一)
- Vue学习笔记(三)
- Vue组件之动态组件
- 2. 「vue@2.6.11 源码分析」数据驱动视图(响应式)
- 快速部署Vue.js前端项目
- Mac升级卸载vue/cli2.9.6--无法卸载vue
- Spring boot+vue前后端开发学习笔记2详解编程语言
- Vue框架搭建在Redis之上的Web应用(vue请求redis)
- Vue快速连接Redis实现数据存储(vue 直连redis)