116 lines
3.0 KiB
Markdown
116 lines
3.0 KiB
Markdown
|
# IFLOW.md - shzg_projectManage 项目说明
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
这是一个基于 Vue 3 和 Element Plus 的后台管理系统前端项目，名为 "shzg_projectManage"。该项目采用现代化的前端技术栈，实现了用户认证、路由控制、API 请求管理、状态管理等功能，主要面向企业级后台管理系统开发。
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **前端框架**: Vue 3 (使用 Composition API)
|
|||
|
|
- **UI 组件库**: Element Plus
|
|||
|
|
- **构建工具**: Vite
|
|||
|
|
- **状态管理**: Pinia
|
|||
|
|
- **路由管理**: Vue Router 4
|
|||
|
|
- **HTTP 客户端**: Axios
|
|||
|
|
- **样式处理**: Sass
|
|||
|
|
- **图标**: SVG 图标系统
|
|||
|
|
|
|||
|
|
## 主要功能特性
|
|||
|
|
|
|||
|
|
1. **用户认证系统**:
|
|||
|
|
- 登录/注册功能
|
|||
|
|
- Token 管理和验证
|
|||
|
|
- 权限控制 (基于角色和菜单权限)
|
|||
|
|
|
|||
|
|
2. **路由管理**:
|
|||
|
|
- 动态路由加载
|
|||
|
|
- 权限路由控制
|
|||
|
|
- 路由守卫
|
|||
|
|
|
|||
|
|
3. **API 管理**:
|
|||
|
|
- 统一的请求封装
|
|||
|
|
- 请求/响应拦截器
|
|||
|
|
- 错误处理机制
|
|||
|
|
- 防重复提交
|
|||
|
|
|
|||
|
|
4. **状态管理**:
|
|||
|
|
- 使用 Pinia 进行全局状态管理
|
|||
|
|
- 用户信息、权限、设置等模块化存储
|
|||
|
|
|
|||
|
|
5. **通用组件**:
|
|||
|
|
- 富文本编辑器
|
|||
|
|
- 文件上传
|
|||
|
|
- 图片上传/预览
|
|||
|
|
- 分页组件
|
|||
|
|
- 数据字典标签
|
|||
|
|
|
|||
|
|
## 关键文件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
src/
|
|||
|
|
├── api/ # API 接口定义
|
|||
|
|
├── assets/ # 静态资源
|
|||
|
|
├── components/ # 通用组件
|
|||
|
|
├── layout/ # 页面布局
|
|||
|
|
├── router/ # 路由配置
|
|||
|
|
├── store/ # Pinia 状态管理
|
|||
|
|
├── utils/ # 工具函数
|
|||
|
|
├── views/ # 页面视图
|
|||
|
|
├── main.js # 应用入口
|
|||
|
|
├── App.vue # 根组件
|
|||
|
|
├── permission.js # 路由权限控制
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 构建和运行
|
|||
|
|
|
|||
|
|
### 开发环境
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
- 服务启动在端口 8010
|
|||
|
|
- 代理配置将 `/dev-api` 代理到 `http://localhost:8080`
|
|||
|
|
|
|||
|
|
### 生产构建
|
|||
|
|
```bash
|
|||
|
|
npm run build:prod # 生产环境构建
|
|||
|
|
npm run build:stage # 预发布环境构建
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 预览构建结果
|
|||
|
|
```bash
|
|||
|
|
npm run preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发约定
|
|||
|
|
|
|||
|
|
1. **代码风格**:
|
|||
|
|
- 使用 ES6+ 语法
|
|||
|
|
- 组件命名遵循 PascalCase
|
|||
|
|
- 使用 Vue 3 Composition API
|
|||
|
|
|
|||
|
|
2. **API 请求**:
|
|||
|
|
- 所有 API 请求通过 `@/utils/request.js` 封装
|
|||
|
|
- 自动携带认证 Token
|
|||
|
|
- 统一错误处理
|
|||
|
|
|
|||
|
|
3. **组件开发**:
|
|||
|
|
- 通用组件放置在 `src/components`
|
|||
|
|
- 业务组件放置在 `src/views` 对应模块下
|
|||
|
|
- 使用 Element Plus 组件库保持 UI 一致性
|
|||
|
|
|
|||
|
|
4. **状态管理**:
|
|||
|
|
- 使用 Pinia 进行状态管理
|
|||
|
|
- 按模块组织 store (用户、设置、权限等)
|
|||
|
|
|
|||
|
|
## 项目配置
|
|||
|
|
|
|||
|
|
- **环境变量**: 通过 `.env.development`、`.env.production`、`.env.staging` 管理不同环境配置
|
|||
|
|
- **Vite 配置**: `vite.config.js` 包含构建和开发服务器配置
|
|||
|
|
- **样式**: 使用 Sass 预处理器，全局样式定义在 `src/assets/styles/index.scss`
|
|||
|
|
|
|||
|
|
## 安全特性
|
|||
|
|
|
|||
|
|
- 防止重复提交
|
|||
|
|
- Token 自动刷新和验证
|
|||
|
|
- 路由权限控制
|
|||
|
|
- 输入验证和错误处理
|