172 lines
4.5 KiB
Markdown
172 lines
4.5 KiB
Markdown
|
# GameGroup 前端项目
|
||
|
|
|
||
|
|
游戏社群管理平台前端应用,基于 Vue 3 + TypeScript + Vite + Element Plus 构建。
|
||
|
|
|
||
|
|
## 技术栈
|
||
|
|
|
||
|
|
- **框架**: Vue 3.4+
|
||
|
|
- **语言**: TypeScript 5.3+
|
||
|
|
- **构建工具**: Vite 5.0+
|
||
|
|
- **UI 框架**: Element Plus 2.5+
|
||
|
|
- **状态管理**: Pinia 2.1+
|
||
|
|
- **路由**: Vue Router 4.2+
|
||
|
|
- **HTTP 客户端**: Axios 1.6+
|
||
|
|
- **CSS 框架**: Tailwind CSS 3.4+
|
||
|
|
- **CSS 预处理**: Sass 1.69+
|
||
|
|
|
||
|
|
## 项目结构
|
||
|
|
|
||
|
|
```
|
||
|
|
GameGroupFE/
|
||
|
|
├── doc/ # 文档目录
|
||
|
|
│ └── 开发步骤文档.md # 开发步骤文档
|
||
|
|
├── public/ # 静态资源
|
||
|
|
├── src/
|
||
|
|
│ ├── api/ # API 接口
|
||
|
|
│ │ ├── auth.ts # 认证接口
|
||
|
|
│ │ ├── user.ts # 用户接口
|
||
|
|
│ │ ├── group.ts # 小组接口
|
||
|
|
│ │ ├── game.ts # 游戏接口
|
||
|
|
│ │ └── appointment.ts # 预约接口
|
||
|
|
│ ├── assets/ # 资源文件
|
||
|
|
│ │ ├── images/ # 图片
|
||
|
|
│ │ ├── icons/ # 图标
|
||
|
|
│ │ └── styles/ # 样式
|
||
|
|
│ ├── components/ # 组件
|
||
|
|
│ │ ├── common/ # 通用组件
|
||
|
|
│ │ │ ├── Button/
|
||
|
|
│ │ │ ├── Input/
|
||
|
|
│ │ │ ├── Modal/
|
||
|
|
│ │ │ └── Card/
|
||
|
|
│ │ ├── business/ # 业务组件
|
||
|
|
│ │ │ ├── UserCard/
|
||
|
|
│ │ │ ├── GroupCard/
|
||
|
|
│ │ │ ├── GameCard/
|
||
|
|
│ │ │ └── AppointmentCard/
|
||
|
|
│ │ └── layout/ # 布局组件
|
||
|
|
│ │ ├── MainLayout.vue
|
||
|
|
│ │ ├── AppHeader.vue
|
||
|
|
│ │ ├── AppSidebar.vue
|
||
|
|
│ │ └── MobileLayout.vue
|
||
|
|
│ ├── composables/ # 组合式函数
|
||
|
|
│ ├── constants/ # 常量
|
||
|
|
│ │ ├── enums.ts # 枚举
|
||
|
|
│ │ └── config.ts # 配置
|
||
|
|
│ ├── directives/ # 自定义指令
|
||
|
|
│ ├── router/ # 路由配置
|
||
|
|
│ │ └── index.ts
|
||
|
|
│ ├── stores/ # 状态管理
|
||
|
|
│ │ ├── auth.ts # 认证状态
|
||
|
|
│ │ └── app.ts # 应用状态
|
||
|
|
│ ├── types/ # 类型定义
|
||
|
|
│ │ ├── api.ts
|
||
|
|
│ │ ├── user.ts
|
||
|
|
│ │ ├── group.ts
|
||
|
|
│ │ ├── game.ts
|
||
|
|
│ │ └── appointment.ts
|
||
|
|
│ ├── utils/ # 工具函数
|
||
|
|
│ │ ├── request.ts # HTTP 请求
|
||
|
|
│ │ ├── storage.ts # 本地存储
|
||
|
|
│ │ ├── format.ts # 格式化
|
||
|
|
│ │ └── validate.ts # 验证
|
||
|
|
│ ├── views/ # 页面组件
|
||
|
|
│ │ ├── auth/ # 认证页面
|
||
|
|
│ │ ├── home/ # 首页
|
||
|
|
│ │ ├── user/ # 用户页面
|
||
|
|
│ │ ├── group/ # 小组页面
|
||
|
|
│ │ ├── game/ # 游戏页面
|
||
|
|
│ │ ├── appointment/ # 预约页面
|
||
|
|
│ │ ├── points/ # 积分页面
|
||
|
|
│ │ └── honor/ # 荣誉页面
|
||
|
|
│ ├── App.vue # 根组件
|
||
|
|
│ └── main.ts # 入口文件
|
||
|
|
├── .gitignore
|
||
|
|
├── index.html
|
||
|
|
├── package.json
|
||
|
|
├── postcss.config.js
|
||
|
|
├── tailwind.config.js
|
||
|
|
├── tsconfig.json
|
||
|
|
└── vite.config.ts
|
||
|
|
```
|
||
|
|
|
||
|
|
## 快速开始
|
||
|
|
|
||
|
|
### 安装依赖
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
```
|
||
|
|
|
||
|
|
### 开发模式
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run dev
|
||
|
|
```
|
||
|
|
|
||
|
|
访问 http://localhost:5173
|
||
|
|
|
||
|
|
### 构建生产版本
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run build
|
||
|
|
```
|
||
|
|
|
||
|
|
### 预览构建结果
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm run preview
|
||
|
|
```
|
||
|
|
|
||
|
|
## 主要功能
|
||
|
|
|
||
|
|
- ✅ 用户认证(登录/注册)
|
||
|
|
- ✅ 用户个人中心
|
||
|
|
- ✅ 小组管理
|
||
|
|
- ✅ 游戏库
|
||
|
|
- ✅ 预约管理
|
||
|
|
- ✅ 积分排行
|
||
|
|
- ✅ 荣誉墙
|
||
|
|
- ✅ 响应式设计
|
||
|
|
- ✅ 移动端适配
|
||
|
|
|
||
|
|
## 开发规范
|
||
|
|
|
||
|
|
### 命名规范
|
||
|
|
|
||
|
|
- 组件文件: PascalCase (UserCard.vue)
|
||
|
|
- 普通文件: kebab-case (user-profile.ts)
|
||
|
|
- 变量/函数: camelCase (getUserInfo)
|
||
|
|
- 常量: UPPER_SNAKE_CASE (API_BASE_URL)
|
||
|
|
- 类型/接口: PascalCase (UserProfile)
|
||
|
|
|
||
|
|
### Git 提交规范
|
||
|
|
|
||
|
|
```bash
|
||
|
|
feat: 新功能
|
||
|
|
fix: 修复bug
|
||
|
|
docs: 文档更新
|
||
|
|
style: 代码格式调整
|
||
|
|
refactor: 重构
|
||
|
|
test: 测试相关
|
||
|
|
chore: 构建/工具相关
|
||
|
|
```
|
||
|
|
|
||
|
|
## 环境变量
|
||
|
|
|
||
|
|
创建 `.env.local` 文件配置环境变量:
|
||
|
|
|
||
|
|
```bash
|
||
|
|
VITE_API_BASE_URL=/api
|
||
|
|
```
|
||
|
|
|
||
|
|
## 浏览器支持
|
||
|
|
|
||
|
|
- Chrome >= 87
|
||
|
|
- Firefox >= 78
|
||
|
|
- Safari >= 14
|
||
|
|
- Edge >= 88
|
||
|
|
|
||
|
|
## License
|
||
|
|
|
||
|
|
MIT
|