# 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)