75 lines
1.8 KiB
Markdown
75 lines
1.8 KiB
Markdown
# 中道救援培训系统 - 前端
|
||
|
||
## 技术栈
|
||
|
||
- Vue 3.4 + Composition API + `<script setup>`
|
||
- TypeScript 5
|
||
- Vite 5
|
||
- Pinia 2 + pinia-plugin-persistedstate
|
||
- Vue Router 4
|
||
- Element Plus 2
|
||
- Axios
|
||
- SCSS
|
||
|
||
## 目录结构
|
||
|
||
```
|
||
src/
|
||
api/ # API 接口层（按模块拆分，不写状态、不写UI）
|
||
assets/ # 静态资源、SCSS 变量与全局样式
|
||
components/ # 业务组件（不写API）
|
||
Layout/ # 布局：AppLayout / Sidebar / Header / Breadcrumb
|
||
common/ # 通用：StatCard / PageCard / StatusBadge / EmptyState
|
||
composables/ # 组合式函数（复杂逻辑抽取）
|
||
router/ # 路由配置 + 导航守卫
|
||
stores/ # Pinia 状态管理（不写UI）
|
||
types/ # TypeScript 类型定义
|
||
utils/ # 工具函数（纯函数，无副作用）
|
||
views/ # 页面容器（只组装，不写业务逻辑）
|
||
```
|
||
|
||
## 分层原则
|
||
|
||
| 层级 | 职责 | 禁止 |
|
||
|------|------|------|
|
||
| views | 页面组装、布局占位 | 直接调用 API、操作 localStorage |
|
||
| components | UI 渲染、props/emit | 调用 API、访问 store（Layout 除外） |
|
||
| composables | 业务逻辑组装、数据流转 | 操作 DOM、直接渲染 UI |
|
||
| stores | 状态管理、跨组件共享 | 写 UI、调 DOM |
|
||
| api | HTTP 请求、数据转换 | 写状态、写 UI |
|
||
| utils | 纯函数工具、常量 | 副作用、API 调用 |
|
||
|
||
## 快速开始
|
||
|
||
```bash
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 启动开发服务器
|
||
npm run dev
|
||
|
||
# 构建生产环境
|
||
npm run build
|
||
```
|
||
|
||
## 部署
|
||
|
||
构建产物位于 `dist/` 目录，通过 Nginx 独立部署：
|
||
|
||
```nginx
|
||
server {
|
||
listen 80;
|
||
server_name training.example.com;
|
||
root /var/www/training-frontend/dist;
|
||
index index.html;
|
||
|
||
location / {
|
||
try_files $uri $uri/ /index.html;
|
||
}
|
||
|
||
location /api {
|
||
proxy_pass http://backend:8080;
|
||
}
|
||
}
|
||
```
|