Files
XuJiacheng 6d713c22ed feat: 添加Docker部署配置和项目文档
添加前后端Dockerfile和docker-compose配置
创建部署脚本deploy.sh
完善项目文档结构包括前后端文档、API文档和部署文档
更新README提供项目概述和快速开始指南

文档包括详细的技术栈说明、功能模块介绍和部署指南
部署方案支持一键式容器化部署和宝塔面板集成
2026-03-18 14:29:41 +08:00

2.6 KiB
Raw Permalink Blame History

前端功能文档

项目概述

前端项目是基于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. 系统设置

  • 系统配置
  • 主题设置
  • 国际化设置

开发指南

环境搭建

  1. 安装依赖
npm install --legacy-peer-deps
  1. 启动开发服务器
npm run serve
  1. 构建生产版本
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/ 目录。

部署说明

详见 部署文档