91 lines
2.8 KiB
Markdown
91 lines
2.8 KiB
Markdown
# 9.1 前端工程概述
|
||
|
||
:::tip 概述
|
||
前端基于 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` 接口获取菜单数据，自动生成前端路由，无需手动维护路由表。
|
||
|
||
```text
|
||
后端菜单数据 → generator-routers.ts → Vue Router 动态路由
|
||
```
|
||
|
||
### 权限控制
|
||
|
||
`v-perm` / `v-perms` 指令控制按钮级权限：
|
||
|
||
```vue
|
||
<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 | 二维码生成 |
|
||
|
||
## 工程结构
|
||
|
||
```text
|
||
ui/src/
|
||
├── api/ # API 接口层（按业务域分组）
|
||
├── components/ # 公共组件库
|
||
├── directives/ # 自定义指令（v-perm）
|
||
├── enums/ # 枚举常量
|
||
├── hooks/ # 组合式函数
|
||
├── layout/ # 布局组件
|
||
├── plugins/ # 插件
|
||
├── router/ # 路由配置
|
||
├── settings/ # 项目配置
|
||
├── store/ # Pinia 状态管理
|
||
├── styles/ # 全局样式
|
||
├── utils/ # 工具函数
|
||
└── views/ # 页面视图
|
||
```
|
||
|
||
## 开发命令
|
||
|
||
```bash
|
||
pnpm install # 安装依赖
|
||
pnpm dev # 启动开发服务器
|
||
pnpm build # 构建生产版本
|
||
pnpm preview # 预览构建结果
|
||
pnpm lint:eslint # ESLint 检查
|
||
pnpm lint:prettier # Prettier 格式化
|
||
``` |