Vue 2 实现概览
本组文档只说明 Vue 2 管理端特有的实现:Vue CLI 环境与代理、new Vue 装配、Vuex Store、Router 3 动态组件加载以及 Webpack 兼容构建。请求协议、菜单模型、权限字符、字典和文件能力由两套管理端共用,请到前端公共章节查看。
实现地图
| 要解决的问题 | 主要入口 | 对应文档 |
|---|---|---|
| 本地请求怎样到达后端 | .env.*、vue.config.js | 环境变量与本地代理 |
| 应用怎样注册原型方法和组件 | src/main.js、src/plugins、src/directive | 应用装配与 Vuex |
| 全局状态怎样读写 | src/store/index.js、src/store/modules、src/store/getters.js | 应用装配与 Vuex |
| 页面怎样编写并进入动态菜单 | src/views、src/router、src/permission.js | 页面写法与 Router 3 |
| Webpack 怎样处理现代依赖和静态资源 | vue.config.js、package.json、build/index.js | Vue CLI 构建与发布 |
先分清三条链路
| 链路 | 执行时机 | 核心结果 |
|---|---|---|
| 应用装配 | 浏览器首次加载入口模块 | Router、Vuex、插件、指令、Element UI、Markdown 和全局组件可用 |
| 会话与路由 | 每次导航;首次进入登录态页面时最完整 | 拉取用户、菜单并通过 router.addRoutes() 注册路由 |
| 构建与部署 | 执行 Vue CLI build 和静态服务发布时 | 输出 dist,由 Web Server 提供资源并代理 API |
Vue 2 管理端与 Vue 3 管理端共享业务协议,但不是一套源码经兼容层运行。开发时应使用目标仓库的组件 API、状态写法和构建配置,不把 Vue 3 的组合式页面或 Vite 插件直接复制到这里。
公共机制入口
- Axios、Token、传输加密与会话失效见请求、认证与会话。
- 后端菜单转换、路由元信息和页签缓存见菜单、路由与页签。
- 按钮、角色和数据范围见功能、角色与数据权限。
- CRUD 页面落地见开发一个业务页面。
- 字典、参数、上传下载和全局组件分别见字典、参数与缓存、文件上传与下载和通用组件与交互能力。
如果还没有运行项目,先完成Vue 2 快速开始,再阅读本组专题。

