# vcool

**Repository Path**: vcooller/vcool

## Basic Information

- **Project Name**: vcool
- **Description**: vue脚手架模板
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2025-10-23
- **Last Updated**: 2025-10-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# VCool Admin 管理系统

基于 Vue 3 + Vite 的现代化后台管理系统模板，支持动态路由和权限管理。

---

## ✨ 特性

- **Vue 3** - 使用最新的 Vue 3 Composition API
- **Vite** - 快速的开发服务器和构建工具
- **Element Plus** - 优雅的 UI 组件库
- **动态路由** - 支持本地静态路由和基于服务端的动态路由
- **富文本编辑器** - 集成 TinyMCE 编辑器
- **标签页导航** - 支持多标签页管理
- **Pinia 状态管理** - 使用 Pinia 进行状态管理
- **响应式布局** - 适配多种屏幕尺寸

---

## 📋 环境要求

- **Node.js** >= 20.19.0
- **npm** >= 9.0.0 或 **pnpm** >= 8.0.0

---

## 📦 快速开始

### 安装依赖

```bash
npm install
```

### 启动开发服务器

```bash
npm run dev
```

访问：`http://localhost:5173`

### 构建生产版本

```bash
npm run build
```

---

## 🎯 测试账号

登录页面提供了三个测试账号，具有不同的权限：

| 账号 | 密码 | 权限 | 可见菜单数 |
|------|------|------|-----------|
| admin | 123456 | 管理员（所有菜单） | ~12个 |
| user | 123456 | 普通用户（部分菜单） | 5个 |
| guest | 123456 | 访客（最少菜单） | 4个 |

详见：[测试账号说明](./TEST_ACCOUNTS.md)

---

## 🚀 快速测试

5分钟快速体验动态路由功能：

```bash
# 1. 启动项目
npm run dev

# 2. 打开浏览器
# http://localhost:5173/login

# 3. 点击任意账号卡片登录

# 4. 查看不同账号的菜单权限
```

详见：[快速测试指南](./QUICK_TEST.md)

---

## 📚 文档

### 核心文档
- [动态路由配置指南](./DYNAMIC_ROUTE_GUIDE.md) - 完整的配置和使用指南
- [路由重构总结](./ROUTE_REFACTOR_SUMMARY.md) - 系统架构和技术细节
- [测试账号说明](./TEST_ACCOUNTS.md) - 三个测试账号的详细权限对比
- [快速测试指南](./QUICK_TEST.md) - 5分钟快速上手

### 技术文档
- [组件映射修复](./COMPONENT_MAPPING_FIX.md) - 组件路径映射说明
- [文件重命名总结](./FILE_RENAME_SUMMARY.md) - 文件重命名记录
- [集成完成总结](./INTEGRATION_COMPLETE.md) - 完整的集成说明

### 组件文档
- [Keep Alive 说明](./docs/KEEP_ALIVE.md) - 页面缓存配置
- [Tabs 说明](./docs/TABS.md) - 标签页功能说明

---

## 📂 项目结构

```
vcool/
├── src/
│   ├── api/                    # API 接口
│   ├── components/             # 公共组件
│   ├── layouts/                # 布局组件
│   ├── router/                 # 路由配置
│   ├── store/                  # 状态管理
│   ├── views/                  # 页面组件
│   └── utils/                  # 工具函数
├── public/                     # 静态资源
└── docs/                       # 额外文档
```

---

## 🔧 路由系统

### 路由类型

本系统支持三种路由类型：

1. **常量路由** (`constant.js`) - 登录、404等无需权限的页面
2. **本地静态路由** (`static.js`) - 本地配置，所有用户可见
3. **动态路由** (服务端返回) - 根据用户权限动态加载

### 配置本地静态路由

编辑 `src/router/routes/static.js`：

```javascript
export const localStaticMenus = [
  {
    path: "/dashboard",
    name: "_dashboard",
    component: () => import("@/views/dashboard/index.vue"),
    meta: { 
      title: "仪表板", 
      icon: "dashboard",
    }
  },
  // 添加更多静态菜单...
];
```

### 服务端动态路由格式

服务端应返回以下格式：

```json
{
  "dynamicRoutes": [
    {
      "path": "/system",
      "title": "系统管理",
      "icon": "setting",
      "component": "system/index",
      "children": [...]
    }
  ]
}
```

详见：[动态路由配置指南](./DYNAMIC_ROUTE_GUIDE.md)

---

## 🎨 开发指南

### 路由命名规则

所有路由的 `name` 字段遵循以下规则：
- 将 `path` 中的 `/` 替换为 `_`
- 开头添加 `_`
- 全部转为小写

示例：
- `/dashboard` → `_dashboard`
- `/system/user` → `_system_user`
- `/content/article` → `_content_article`

### 添加新页面

1. 在 `src/views/` 下创建页面组件
2. 在 `src/router/routes/static.js` 添加路由（本地静态）
3. 或由服务端返回路由配置（动态路由）

### 修改用户权限

编辑 `src/store/mock-dynamic-routes.example.js`，修改不同角色的路由配置。

---

## 🛠️ 技术栈

- **框架**: Vue 3.5
- **构建工具**: Vite 6.0
- **UI 框架**: Element Plus
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **HTTP 客户端**: Axios
- **富文本编辑器**: TinyMCE
- **CSS 预处理**: SCSS
- **样式框架**: Tailwind CSS

---

## 📄 许可证

MIT License

---

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

## 📮 联系方式

如有问题，请查看文档或提交 Issue。