9.1 前端工程概述

概述

前端基于 Vue 3 + TypeScript + Vite + ElementPlus 构建，采用 Pinia 状态管理，支持动态菜单和权限控制。通过 Axios 封装统一处理请求/响应/错误，通过 v-perm 指令实现按钮级权限控制。

技术栈

类别	技术	版本	说明
框架	Vue	3.4+	核心 UI 框架
语言	TypeScript	4.9+（实际 ^4.9.5）	类型安全
UI 库	ElementPlus	2.7+	组件库
构建	Vite	3.2+（实际 ^3.2.10）	开发服务器与构建
状态	Pinia	2.1+	全局状态管理
路由	Vue Router	4.3+	路由管理
HTTP	Axios	0.27+（实际 ^0.27.2）	HTTP 请求（注：0.27.x 版本较老）
富文本	TinyMce	5.10+	富文本编辑器
图表	ECharts	5.5+	数据可视化
CSS	TailwindCSS	3.4+	原子化 CSS

核心特性

动态路由

从后端 /index/getMenus 接口获取菜单数据，自动生成前端路由，无需手动维护路由表。

后端菜单数据 → generator-routers.ts → Vue Router 动态路由

权限控制

v-perm / v-perms 指令控制按钮级权限：

<el-button v-perm="'sys:user:add'">新增</el-button>

Token 管理

Axios 拦截器自动处理：

• 请求拦截：自动添加 Authorization: Bearer <token> 请求头
• 响应拦截：code === 401 时自动跳转登录页

组件库

内置 20+ 个业务组件：

组件	说明
BasicTable	数据表格（分页、排序、搜索）
BasicForm	动态表单（配置驱动）
BasicModal	弹窗（表单弹窗、详情弹窗）
BasicUpload	文件上传
Editor	富文本编辑器（TinyMce）
ImportExcel	Excel 导入
Cropper	头像裁剪
Region	行政区划选择
Password	密码强度检测
Qrcode	二维码生成

工程结构

ui/src/
├── api/                # API 接口层（按业务域分组）
├── components/         # 公共组件库
├── directives/         # 自定义指令（v-perm）
├── enums/              # 枚举常量
├── hooks/              # 组合式函数
├── layout/             # 布局组件
├── plugins/            # 插件
├── router/             # 路由配置
├── settings/           # 项目配置
├── store/              # Pinia 状态管理
├── styles/             # 全局样式
├── utils/              # 工具函数
└── views/              # 页面视图

开发命令

pnpm install        # 安装依赖
pnpm dev            # 启动开发服务器
pnpm build          # 构建生产版本
pnpm preview        # 预览构建结果
pnpm lint:eslint    # ESLint 检查
pnpm lint:prettier  # Prettier 格式化