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)
各种插件、全局的CSS、全局的模块在这里引入(如Vue-Router),程序入口文件,初始化vue实例,并引入使用需要的插件和各种公共组件.
一人之下万人之上的组件,作为主组件在main.js中被使用,主组件app.vue调用其他组件,构建页面。app.vue可以当做是网站首页,是一个vue项目的主组件,页面入口文件 ,所有页面都是在App.vue下进行切换的。是整个项目的关键,app.vue负责构建定义及页面组件归集。
router里的index.js 把准备好路由组件注册到路由里;所有路由都从App.vue这个层级开始。
通过自定义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'
}
Mock.js 是一个模拟数据生成器,帮助前端开发和原型与后端进度分离,根据数据模板生成模拟数据,为 ajax 请求提供请求/响应模拟。
Mock.js 通过覆盖和模拟原生 XMLHttpRequest 的行为来拦截 Ajax 请求,不依赖于第三方 Ajax 工具库。
data
是否与数据模板 template
匹配。template
转换成 JSON Schema。相关文档:https://github.com/nuysoft/Mock
路由守卫则是处理进度条、检查登录是否失效、检查页面权限。
axios请求拦截器验证token是否失效,响应拦截器则是弹出错误,验证权限、退出登录,实际上就是检查token 的cookie。
main.js运行时,如果开启了异步路由,初始化的是公共的一些路由,然后在登录时初始化根据用户而匹配出的动态路由,然后合并成为新的路由规则。然后清空当前的路由规则,用异步之后的规则重新初始化。
如果没有开启异步路由,则是在main.js运行后除初始化完整的路由。
然后根据异步请求之后的路由生成导航栏菜单。
传递给bootstrap的router是vue-router实例化之后的对象,options
返回创建 Router 时传递的原始配置对象(只读)。
扩展:
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
当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。
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。
默认是AdminLayout布局,顶部由(\src\layouts\header)内的Logo、avatar、notive、search四部分组成,logo在手机端时显示默认图片,pc端显示组件(\src\components\menu\SideMenu.vue);
标题的Admin在.env环境变量内进行设置。
meta: {
icon: 'solution',
page: {
cacheAble: false
}
},