From 11283e9ca180d77e203870d33859c3e1fbf3edb4 Mon Sep 17 00:00:00 2001
From: gitee-bot <no-reply@git.oschina.net>
Date: Thu, 16 Apr 2026 09:21:21 +0000
Subject: [PATCH] =?UTF-8?q?docs:=20=E5=88=9B=E5=BB=BA=E4=B8=AD=E6=96=87REA?=
 =?UTF-8?q?DME=E6=96=87=E6=A1=A3=EF=BC=8C=E6=BB=A1=E8=B6=B3issue=E9=9C=80?=
 =?UTF-8?q?=E6=B1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 332 +++++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 329 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 1511959..8960712 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,331 @@
-# Vue 3 + Vite
+# CSGO 管理后台
 
-This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+一个基于 Vue 3 + PrimeVue + Tailwind CSS 构建的现代化管理后台系统。
 
-Learn more about IDE Support for Vue in the [Vue Docs Scaling up Guide](https://vuejs.org/guide/scaling-up/tooling.html#ide-support).
+---
+
+## 项目简介
+
+本项目是一个前后端分离的管理后台系统，采用 Vue 3 Composition API 开发，集成 PrimeVue 丰富组件库和 Tailwind CSS 样式框架，提供完善的用户管理、角色权限、数据展示等功能。
+
+---
+
+## 技术栈清单
+
+### 前端框架与库
+
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| Vue | 3.5.24 | 渐进式 JavaScript 框架 |
+| Vite | 7.2.4 | 下一代前端构建工具 |
+| Vue Router | 4.6.4 | 官方路由管理器 |
+| Pinia | 3.0.4 | 状态管理库 |
+
+### UI 组件库
+
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| PrimeVue | 4.5.4 | 丰富的 UI 组件库 |
+| @primevue/themes | 4.5.4 | PrimeVue 主题系统 |
+| PrimeIcons | 7.0.0 | 图标库 |
+| tailwindcss-primeui | 0.6.1 | PrimeVue Tailwind 主题 |
+
+### 样式框架
+
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| Tailwind CSS | 4.1.18 | 实用优先 CSS 框架 |
+| @tailwindcss/vite | 4.1.18 | Tailwind Vite 插件 |
+
+### 开发工具
+
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| @vitejs/plugin-vue | 6.0.1 | Vite Vue 插件 |
+| unplugin-vue-components | 30.0.0 | 组件自动导入 |
+| @primevue/auto-import-resolver | 4.5.4 | PrimeVue 自动导入解析器 |
+
+### 其他依赖
+
+| 技术 | 版本 | 说明 |
+|------|------|------|
+| axios | 1.13.2 | HTTP 客户端 |
+| chart.js | 4.5.1 | 图表库 |
+
+---
+
+## 项目架构
+
+```
+┌─────────────────────────────────────────────────────────────────┐
+│                        前端应用层                                 │
+├─────────────────────────────────────────────────────────────────┤
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐              │
+│  │   Pages    │  │ Components  │  │   Router    │              │
+│  │   (页面)    │  │  (组件)     │  │   (路由)    │              │
+│  └─────────────┘  └─────────────┘  └─────────────┘              │
+│         │               │               │                       │
+│  ┌─────────────────────────────────────────────┐                │
+│  │              Store (Pinia)                   │                │
+│  │              状态管理                         │                │
+│  └─────────────────────────────────────────────┘                │
+│         │                                                   │
+│  ┌─────────────────────────────────────────────┐                │
+│  │              API Layer (Axios)               │                │
+│  │              接口封装                         │                │
+│  └─────────────────────────────────────────────┘                │
+└─────────────────────────────────────────────────────────────────┘
+                            │
+                            ▼
+┌─────────────────────────────────────────────────────────────────┐
+│                        后端 API                                  │
+│                   (需要自行部署后端服务)                          │
+└─────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 目录结构
+
+```
+csgo_fe/
+├── public/                     # 静态资源（favicon 等）
+│
+├── src/                       # 源代码目录
+│   ├── main.js               # 应用入口文件
+│   ├── App.vue              # 根组件
+│   │
+│   ├── pages/               # 页面目录（按业务模块组织）
+│   │   ├── dashboard/       # 仪表盘模块
+│   │   │   ├── index.vue    # 仪表盘首页
+│   │   │   ├── login.vue   # 登录页面
+│   │   │   └── 404.vue     # 404 错误页面
+│   │   └── system/          # 系统管理模块
+│   │       ├── user/        # 用户管理
+│   │       ├── role/        # 角色管理
+│   │       └── menu/        # 菜单管理
+│   │
+│   ├── components/         # 全局公共组件
+│   │   ├── common/         # 通用组件
+│   │   └── layout/         # 布局组件
+│   │
+│   ├── api/                # API 接口管理
+│   │   ├── index.js        # 统一导出
+│   │   ├── request.js      # axios 封装
+│   │   └── modules/        # 业务模块 API
+│   │
+│   ├── store/              # Pinia 状态管理
+│   │   ├── index.js        # Pinia 实例
+│   │   └── modules/        # 业务模块 store
+│   │
+│   ├── router/             # 路由配置
+│   │   ├── index.js        # 路由主文件
+│   │   └── guards.js       # 路由守卫
+│   │
+│   ├── utils/              # 工具函数
+│   │   ├── common.js       # 通用工具
+│   │   └── storage.js      # 存储封装
+│   │
+│   └── assets/             # 静态资源
+│       └── styles/
+│           └── main.css    # 主样式文件
+│
+├── index.html               # HTML 入口
+├── package.json             # 项目依赖
+├── vite.config.js          # Vite 配置
+└── README.md               # 项目说明
+```
+
+---
+
+## 环境要求
+
+| 环境 | 版本要求 |
+|------|----------|
+| Node.js | 18.0.0 或更高版本 |
+| npm | 9.0.0 或更高版本 |
+
+### 检查 Node.js 版本
+
+```bash
+node --version
+# 输出示例: v20.11.0
+
+npm --version
+# 输出示例: 10.2.4
+```
+
+---
+
+## 安装与配置
+
+### 1. 克隆项目
+
+```bash
+git clone <repository-url>
+cd csgo_fe
+```
+
+### 2. 安装依赖
+
+```bash
+npm install
+```
+
+### 3. 环境配置
+
+项目默认配置如下，可根据需要修改：
+
+| 配置项 | 默认值 | 说明 |
+|--------|--------|------|
+| 开发服务器 | http://localhost:5173 | Vite 默认端口 |
+| 代理目标 | / | 可在 vite.config.js 中配置 |
+| 构建输出 | dist/ | 生产构建输出目录 |
+
+如需修改开发服务器端口，在 `vite.config.js` 中添加：
+
+```javascript
+export default defineConfig({
+    server: {
+        port: 3000  // 自定义端口
+    }
+})
+```
+
+---
+
+## 启动与运行
+
+### 开发模式
+
+启动开发服务器，支持热更新：
+
+```bash
+npm run dev
+```
+
+启动后访问 http://localhost:5173
+
+### 生产构建
+
+构建生产环境版本：
+
+```bash
+npm run build
+```
+
+构建完成后，产物会输出到 `dist` 目录。
+
+### 预览构建
+
+预览生产构建效果：
+
+```bash
+npm run preview
+```
+
+---
+
+## 代码示例
+
+### 页面组件示例
+
+```vue
+<!-- src/pages/dashboard/index.vue -->
+<template>
+  <div class="p-6">
+    <h1 class="text-3xl font-bold mb-4">仪表盘</h1>
+    
+    <Card>
+      <template #title>欢迎使用</template>
+      <template #content>
+        <p>这是一个基于 Vue 3 + PrimeVue 的管理后台。</p>
+      </template>
+    </Card>
+  </div>
+</template>
+
+<script setup>
+import Card from 'primevue/card'
+</script>
+```
+
+### API 请求示例
+
+```javascript
+// src/api/modules/user.js
+import { request } from '../request'
+
+export const getUserList = (params) => {
+  return request.get('/api/users', { params })
+}
+
+export const login = (data) => {
+  return request.post('/api/login', data)
+}
+```
+
+### 状态管理示例
+
+```javascript
+// src/store/modules/user.js
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+  state: () => ({
+    userInfo: null,
+    token: ''
+  }),
+  
+  actions: {
+    setUserInfo(info) {
+      this.userInfo = info
+    },
+    setToken(token) {
+      this.token = token
+    }
+  }
+})
+```
+
+### 使用 Store
+
+```vue
+<script setup>
+import { useUserStore } from '@/store/modules/user'
+
+const userStore = useUserStore()
+
+// 获取用户信息
+console.log(userStore.userInfo)
+</script>
+```
+
+---
+
+## 常用命令
+
+| 命令 | 说明 |
+|------|------|
+| `npm run dev` | 启动开发服务器 |
+| `npm run build` | 构建生产版本 |
+| `npm run preview` | 预览生产构建 |
+
+---
+
+## 相关文档
+
+- [Vue 3 官方文档](https://cn.vuejs.org/)
+- [Vite 官方文档](https://vitejs.dev/)
+- [PrimeVue 官方文档](https://primevue.org/)
+- [PrimeIcons 图标库](https://primeicons.org/)
+- [Tailwind CSS 官方文档](https://tailwindcss.com/docs)
+- [Vue Router 文档](https://router.vuejs.org/zh/)
+- [Pinia 文档](https://pinia.vuejs.org/zh/)
+- [Axios 文档](https://axios-http.com/docs/intro)
+
+---
+
+## 许可证
+
+MIT License
\ No newline at end of file
-- 
Gitee