Vue 3 实现概览

本组文档只说明 Vue 3 管理端特有的实现：Vite 环境与代理、createApp 装配、Pinia Store、Router 4 动态组件加载以及生产构建。请求协议、菜单模型、权限字符、字典和文件能力由两套管理端共用，请到前端公共章节查看。

Vue 3

实现地图

要解决的问题	主要入口	对应文档
本地请求怎样到达后端	.env.*、vite.config.js	环境变量与本地代理
应用怎样注册全局能力	src/main.js、src/plugins、src/directive	应用装配与 Pinia
全局状态由谁维护	src/store/index.js、src/store/modules	应用装配与 Pinia
页面怎样编写并进入动态菜单	src/views、src/router、src/permission.js	页面写法与 Router 4
Vite 怎样生成可发布产物	vite.config.js、vite/plugins、package.json	Vite 构建与发布

先分清三条链路

链路	执行时机	核心结果
应用装配	浏览器首次加载入口模块	Router、Pinia、插件、指令、Element Plus 和全局组件可用
会话与路由	每次导航；首次进入登录态页面时最完整	拉取用户、菜单并通过 router.addRoute() 注册可访问路由
构建与部署	执行 Vite build 和静态服务发布时	输出 dist，由 Web Server 提供资源并代理 API

业务页面通常不修改入口装配；新菜单通常不修改 Router 常量表；新环境也不应在业务 API 中写死完整后端地址。先确认问题属于哪条链路，再进入对应文件。

公共机制入口

• Axios、Token、传输加密与会话失效见请求、认证与会话。
• 后端菜单转换、路由元信息和页签缓存见菜单、路由与页签。
• 按钮、角色和数据范围见功能、角色与数据权限。
• 列表表单开发见开发一个业务页面。
• 字典、参数、上传下载和全局组件分别见字典、参数与缓存、文件上传与下载和通用组件与交互能力。

如果还没有运行项目，先完成Vue 3 快速开始，再阅读本组专题。