9.1 前端工程概述

概述

前端为独立 Vite 工程（ui/）：Vue3 + TypeScript + ElementPlus + Pinia。核心机制包括 axios 信封解包、动态菜单路由、权限指令与 28 个公共组件。本章按"工程基础 → 核心机制 → 公共组件 → 开发实践"组织。

技术构成

层	选型
框架	Vue 3.4（Composition API）+ TypeScript 4.9
构建	Vite 3（开发端口 8001，/api 代理到 8000）
UI	ElementPlus 2.7 + @element-plus/icons
状态	Pinia（7 个 store 模块）
路由	vue-router 4（静态 + 动态菜单生成）
HTTP	axios 0.27（自研拦截器封装层）
富文本	TinyMCE / vue-quill（双引擎）
其他	echarts、xlsx、cropperjs、ali-oss、dayjs、lodash

工程地图

ui/src/
├── api/          接口模块（按业务域分组）
├── components/   公共组件（28 个）
├── directives/   指令（perm/perms/scrollBar/clickOutside）
├── enums/        枚举常量
├── hooks/        组合式函数（core/event/setting/web 分组）
├── layout/       布局系统
├── router/       静态路由 + 动态生成器 + 守卫
├── store/        Pinia（user/asyncRoute/tabsView/design/project/lockscreen/ossConfig）
├── styles/       全局样式与主题变量
├── settings/     应用默认设置
├── utils/        工具（http/auth/validate/date/file...）
└── views/        页面（按业务域分目录）

与后端的协作形态

登录 → GetMenus（动态路由）→ 页面渲染
     → api 模块发起请求（http 封装加前缀/Token）
     → 拦截器解包信封（0 成功 / 401 刷新或跳登录 / 其余弹 msg）
     → v-perm 控制按钮显隐 / 字典接口驱动下拉

阅读路线

目标	页面
了解工程结构	9.2 目录结构详解
接后端接口	9.4 HTTP 封装 + 9.14 API 模块编写规范
做页面	9.13 新增页面开发步骤
排查登录/权限问题	9.5 路由与动态菜单 + 9.7 权限控制 + 9.8 登录流程
用公共组件	9.9–9.12 组件四篇

命令

cd ui
pnpm dev            # 开发
pnpm build          # 生产构建
pnpm type:check     # 类型检查
pnpm lint:eslint    # ESLint

下一步

→ 9.2 目录结构详解