70 lines
2.4 KiB
Markdown
70 lines
2.4 KiB
Markdown
# 9.1 前端工程概述
|
||
|
||
:::tip 概述
|
||
前端为独立 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 |
|
||
|
||
## 工程地图
|
||
|
||
```text
|
||
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/ 页面（按业务域分目录）
|
||
```
|
||
|
||
## 与后端的协作形态
|
||
|
||
```text
|
||
登录 → 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 组件四篇 |
|
||
|
||
## 命令
|
||
|
||
```bash
|
||
cd ui
|
||
pnpm dev # 开发
|
||
pnpm build # 生产构建
|
||
pnpm type:check # 类型检查
|
||
pnpm lint:eslint # ESLint
|
||
```
|
||
|
||
## 下一步
|
||
|
||
→ [9.2 目录结构详解](/zh/frontend/directory.html)
|