添加前后端Dockerfile和docker-compose配置 创建部署脚本deploy.sh 完善项目文档结构包括前后端文档、API文档和部署文档 更新README提供项目概述和快速开始指南 文档包括详细的技术栈说明、功能模块介绍和部署指南 部署方案支持一键式容器化部署和宝塔面板集成
2.6 KiB
2.6 KiB
前端功能文档
项目概述
前端项目是基于Vue 3.x的Web后台管理系统,使用Element Plus作为UI组件库,提供直观、高效的管理界面。
技术栈
- Vue 3.x
- Element Plus
- Vue Router
- Pinia (状态管理)
- TypeScript
- ECharts (数据可视化)
- WangEditor (富文本编辑器)
项目结构
front-end/
├── src/
│ ├── api/ # API接口定义
│ ├── assets/ # 静态资源
│ ├── components/ # 通用组件
│ ├── config/ # 配置文件
│ ├── i18n/ # 国际化
│ ├── plugins/ # 插件
│ ├── router/ # 路由配置
│ ├── store/ # 状态管理
│ ├── utils/ # 工具函数
│ ├── views/ # 页面组件
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── public/ # 公共静态资源
├── mock/ # 模拟数据
├── library/ # 自定义库
└── scripts/ # 脚本文件
核心功能模块
1. 认证与授权
- 登录/注册功能
- 权限管理
- 角色控制
2. 系统管理
- 用户管理
- 角色管理
- 菜单管理
- 部门管理
- 字典管理
3. 数据可视化
- 仪表盘
- 统计报表
- 图表展示
4. 内容管理
- 公告管理
- 文章管理
- 文件管理
5. 系统设置
- 系统配置
- 主题设置
- 国际化设置
开发指南
环境搭建
- 安装依赖
npm install --legacy-peer-deps
- 启动开发服务器
npm run serve
- 构建生产版本
npm run build
代码规范
- 使用ESLint进行代码检查
- 使用Prettier进行代码格式化
- 遵循Vue 3 Composition API规范
- 组件命名使用PascalCase
- 函数命名使用camelCase
路由配置
路由配置位于 src/router/index.ts,支持动态路由和权限控制。
状态管理
使用Pinia进行状态管理,状态模块位于 src/store/modules/。
API调用
API接口定义位于 src/api/,使用axios进行网络请求。
页面结构
布局结构
- 顶部导航栏
- 左侧菜单
- 右侧内容区域
- 底部版权信息
响应式设计
- 支持PC端和移动端
- 自适应布局
主题系统
支持多种主题切换,包括:
- 蓝色主题
- 绿色主题
- 紫色主题
- 红色主题
国际化
支持中英文切换,国际化文件位于 src/i18n/。
模拟数据
开发环境下使用mock数据,位于 mock/ 目录。
部署说明
详见 部署文档。