架构
管理后台是单页应用：Vite 打包 Vue 3，运行时经 Axios 调用 /adminapi，登录后由后端菜单驱动动态路由。
启动链路
main.ts 中的大致顺序：
- 引入 Element Plus 样式、设计 token（
theme/tokens.scss）、全局 SCSS、virtual:uno.css createPinia()→app.use(router)→ i18n → Element Plus / Highlight / 指令- 注册路由守卫：
createInitGuard（auth.guard.ts）、createPermissionGuard（permission.guard.ts） app.mount('#app')
分层约定
| 层 | 位置 | 职责 |
|---|---|---|
| 视图 | views/ | 页面 UI；列表/表单优先用 hooks |
| 接口 | api/ | 对 myRequest 的薄封装，按模块拆文件 |
| 状态 | store/modules/ | 登录态、配置、布局主题、多标签、实时通道 |
| 路由 | router/ | 常量路由 + 菜单转 RouteRecordRaw + 守卫 |
| 公共能力 | components/、hooks/、utils/ | 可复用 UI、组合逻辑、请求与主题工具 |
页面不要直接 axios.create；统一走 @/utils/request 导出的 myRequest。权限码来自登录/用户信息接口，经 useUserStore 与指令消费，前端只做展示控制，最终鉴权仍在后端。
布局与页面
登录成功后，动态菜单挂在 INDEX_ROUTE（path /，组件 layout/index.vue）下。布局内再渲染侧栏、顶栏、多标签与 <router-view>。装修编辑器等全屏页走常量路由（如 /diy/editor），不套默认布局。
与后端的边界
- 业务错误看响应体
code（成功为200或0），不是仅看 HTTP 状态码 - 分页入参
page/limit，列表数据在data.list与data.pagination - JWT 放在
Authorization: Bearer …；剩余寿命不足一半时请求拦截器会静默刷新
PC（Nuxt）与 UniApp 是独立工程，不在本章范围内。