# gw_front_end_client

**Repository Path**: Monchi_git/gw_front_end_client

## Basic Information

- **Project Name**: gw_front_end_client
- **Description**: 这是一个基于 React + Vite 构建的现代化游戏社区与商城前端项目。项目整合了游戏浏览、社区互动、个人中心、购物车及实时聊天等功能，旨在为游戏爱好者提供一站式服务平台。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-06-22
- **Last Updated**: 2025-12-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Game World - 游戏世界前端项目

这是一个基于 React + Vite 构建的现代化游戏社区与商城前端项目。项目整合了游戏浏览、社区互动、个人中心、购物车及实时聊天等功能，旨在为游戏爱好者提供一站式服务平台。

## ✨ 功能特点

- **响应式设计**：适配 PC 和移动端设备，提供流畅的用户体验。
- **组件化开发**：采用 React Hooks 和函数式组件，代码结构清晰、易于维护。
- **状态管理**：集成 Redux Toolkit 和 Redux Persist，高效、可预测地管理全局状态并实现数据持久化。
- **路由权限控制**：通过路由元信息实现灵活的路由守卫，保护用户私密路由。
- **实时通信**：集成 WebSocket，实现用户间的实时聊天功能。
- **富文本编辑**：内置 TinyMCE 编辑器，支持用户发布图文并茂的帖子。
- **代码规范**：配置了 ESLint 和 TypeScript，确保代码质量和开发效率。

## 🚀 技术栈

- **核心框架**：[React](https://react.dev/) 18
- **构建工具**：[Vite](https://vitejs.dev/)
- **UI 框架**：[Ant Design](https://ant.design/)
- **状态管理**：[Redux Toolkit](https://redux-toolkit.js.org/)
- **路由**：[React Router DOM](https://reactrouter.com/)
- **HTTP 请求**：[Axios](https://axios-http.com/)
- **语言**：[TypeScript](https://www.typescriptlang.org/)
- **WebSocket**：原生 WebSocket API 封装
- **数据持久化**：[Redux Persist](https://github.com/rt2zz/redux-persist)

## 📦 安装与启动

请确保你已经安装了 [Node.js](https://nodejs.org/) (推荐 v18.0 或更高版本)。

1.  **克隆项目**

    ```bash
    git clone https://gitee.com/Monchi_git/gw_front_end_client.git
    cd gw_front_end_client
    ```

2.  **安装依赖**

    ```bash
    npm install
    ```

3.  **启动开发环境**

    ```bash
    npm run dev
    ```

    项目将在 `http://localhost:5173` (或其他可用端口) 启动。

4.  **项目打包**
    - **生产环境打包**：
      ```bash
      npm run build
      ```
    - **开发环境打包**：
      `bash
    npm run build:dev
    `
      打包后的文件将输出到 `dist` 目录。

## 📁 项目结构

```
gw_front_end_client/
├── public/                # 静态资源，如TinyMCE
├── src/
│   ├── apis/              # API 请求模块
│   ├── assets/            # 静态资源，如图片、SVG
│   ├── components/        # 公共组件
│   ├── hooks/             # 自定义 Hooks
│   ├── pages/             # 页面级组件
│   ├── router/            # 路由配置
│   ├── store/             # Redux 全局状态管理
│   ├── utils/             # 工具函数 (请求封装、WebSocket等)
│   ├── App.tsx            # 应用根组件
│   └── main.tsx           # 应用入口文件
├── .eslintrc.cjs          # ESLint 配置文件
├── package.json           # 项目依赖与脚本配置
└── vite.config.ts         # Vite 配置文件
```

## 📜 可用脚本

- `npm run dev`: 启动开发服务器。
- `npm run build`: 编译并打包生产环境版本。
- `npm run build:dev`: 编译并打包开发环境版本。
- `npm run lint`: 使用 ESLint 检查代码规范。
- `npm run preview`: 在本地预览打包后的项目。

---