主应用快速上手

🎯 5分钟搭建一个完整的管理系统！ Vue Ace Admin 主应用基于 Vue 3.5、TypeScript、Ant Design Vue 等前沿技术栈构建，开箱即用，让你专注于业务开发。

⚡ 为什么选择 Vue Ace Admin？

• ✅ 5分钟快速上手 - 克隆即用，无需复杂配置
• ✅ 完整功能 - 用户管理、权限管理、系统管理一应俱全
• ✅ 权限体系 - RBAC 权限管理，开箱即用
• ✅ 最新技术 - Vue 3.5 + TypeScript 5.x + Vite 5.x
• ✅ 代码清晰 - 无复杂封装，学习成本低

🚀 快速开始

1. 环境准备

• Node.js: 推荐 20.x
• pnpm: 推荐 10.x+（项目使用 pnpm@10.14.0）

2. 克隆项目

git clone https://github.com/codexlin/vue-ace-admin.git
cd vue-ace-admin

3. 安装依赖

# 安装 pnpm（如已安装可跳过）
npm install pnpm -g

# 安装依赖
pnpm install

4. 启动开发服务器

pnpm dev

访问：http://localhost:5173

5. 登录系统

• 账号: xoxosos666@gmail.com
• 密码: admin666

📦 项目结构

vue-ace-admin/
├── packages/              # Monorepo 包
│   ├── hooks/            # @codexlin/ace-admin-hooks
│   └── ui/               # @codexlin/ace-admin-ui
├── src/                  # 主应用代码
│   ├── views/            # 页面组件
│   │   ├── dashboard/   # 仪表盘
│   │   ├── system/      # 系统管理
│   │   │   ├── user/    # 用户管理
│   │   │   ├── role/    # 角色管理
│   │   │   └── menu/    # 菜单管理
│   │   └── user/        # 用户相关
│   ├── layouts/         # 布局组件
│   ├── router/          # 路由配置
│   ├── stores/          # Pinia 状态管理
│   ├── components/      # 公共组件
│   └── utils/           # 工具函数
├── docs/                # 文档站点
└── package.json         # 根配置

🎯 核心功能

1. 用户管理

• ✅ 用户登录/登出
• ✅ 用户列表管理
• ✅ 用户信息编辑

位置: src/views/system/user/UserView.vue

2. RBAC 权限管理

• ✅ 页面权限（动态路由）
• ✅ 路由守卫
• ✅ 指令权限
• ✅ 权限函数

位置: src/directives/common/permission.ts

3. 系统管理

• ✅ 用户管理: 用户 CRUD 操作
• ✅ 角色管理: 角色权限配置
• ✅ 菜单管理: 动态菜单配置

位置: src/views/system/

4. 多主题

• ✅ 亮色主题
• ✅ 暗色主题
• ✅ 自定义主题

位置: src/stores/modules/app.ts

5. 多布局

• ✅ 左侧布局（默认）
• ✅ 顶部布局

位置: src/layouts/

6. Dashboard

• ✅ 根据用户角色定制化显示
• ✅ 数据统计卡片

位置: src/views/dashboard/DashboardView.vue

🔧 常用命令

# 开发
pnpm dev

# 构建
pnpm build

# 预览构建结果
pnpm preview

# 代码检查
pnpm lint

# 构建文档
pnpm build:docs

# 开发文档
pnpm dev:docs

📚 下一步

• 查看组件文档 - 使用组件库
• 查看开发指南 - 参与开发
• 查看部署指南 - 部署应用
• 查看项目介绍 - 了解更多功能