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

快速开始

安装依赖

npm install

开发模式

npm run dev

访问 http://localhost:5173

构建生产版本

npm run build

预览构建结果

npm run preview

主要功能

• ✅ 用户认证(登录/注册)
• ✅ 用户个人中心
• ✅ 小组管理
• ✅ 游戏库
• ✅ 预约管理
• ✅ 积分排行
• ✅ 荣誉墙
• ✅ 响应式设计
• ✅ 移动端适配

开发规范

命名规范

• 组件文件: PascalCase (UserCard.vue)
• 普通文件: kebab-case (user-profile.ts)
• 变量/函数: camelCase (getUserInfo)
• 常量: UPPER_SNAKE_CASE (API_BASE_URL)
• 类型/接口: PascalCase (UserProfile)

Git 提交规范

feat: 新功能
fix: 修复bug
docs: 文档更新
style: 代码格式调整
refactor: 重构
test: 测试相关
chore: 构建/工具相关

环境变量

创建 .env.local 文件配置环境变量:

VITE_API_BASE_URL=/api

浏览器支持

• Chrome >= 87
• Firefox >= 78
• Safari >= 14
• Edge >= 88

License

MIT