# vue-admin

**Repository Path**: xujianchen/vue-admin

## Basic Information

- **Project Name**: vue-admin
- **Description**: vue3+element-plus搭建的一个后台管理系统模板
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: typescript
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-05-20
- **Last Updated**: 2026-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# 项目说明

`vue` + `typescript` + `vite` + `element-plus` + `oxc`搭建的后台管理模板

# VE Admin

<p align="center">
  <img src="https://img.shields.io/badge/Vue-3.5+-4FC08D?style=flat-square&logo=vue.js&logoColor=white" alt="Vue 3" />
  <img src="https://img.shields.io/badge/TypeScript-5.7+-3178C6?style=flat-square&logo=typescript&logoColor=white" alt="TypeScript" />
  <img src="https://img.shields.io/badge/Vite-Rolldown-646CFF?style=flat-square&logo=vite&logoColor=white" alt="Vite" />
  <img src="https://img.shields.io/badge/pnpm-10.29+-F69220?style=flat-square&logo=pnpm&logoColor=white" alt="pnpm" />
</p>

<p align="center">
  一款基于 Vue 3 生态构建的现代化后台管理系统模板
</p>

<p align="center">
  <a href="https://6d4b069e.pinme.dev" target="_blank">在线演示</a> •
  <a href="#-功能特性">功能</a> •
  <a href="#-快速开始">快速开始</a> •
  <a href="#-项目结构">结构</a> •
  <a href="#-组件库">组件</a>
</p>

</div>
  <tr>
    <td width="50%">
      <img src="./public/1.png" alt="仪表板" />
      <p align="center">仪表板</p>
    </td>
    <td width="50%">
      <img src="./public/2.png" alt="用户管理" />
      <p align="center">用户管理</p>
    </td>
  </tr>
  <tr>
    <td width="50%">
      <img src="./public/3.png" alt="订单管理" />
      <p align="center">订单管理</p>
    </td>
    <td width="50%">
      <img src="./public/4.png" alt="数据分析" />
      <p align="center">数据分析</p>
    </td>
  </tr>
</table>

## 🚀 技术栈

| 类别 | 技术 |
|------|------|
| **核心框架** | [Vue 3](https://vuejs.org/) · [TypeScript](https://www.typescriptlang.org/) |
| **构建工具** | [Vite8](https://vitejs.dev/) (Rolldown) |
| **UI 组件** | [element-plus](https://element-plus.org/zh-CN)
| **状态管理** | [Pinia](https://pinia.vuejs.org/)
| **路由** | [Vue Router 4](https://router.vuejs.org/) |
| **国际化** | [Vue I18n](https://vue-i18n.intlify.dev/) |
| **工具库** | [VueUse](https://vueuse.org/) |
| **HTTP 请求** | [axios](https://axios-http.com/) |

## 🎯 功能特性

- **🌓 主题系统** — 支持暗黑/明亮模式切换，支持自定义配色
- **🌍 国际化支持** — 完整的中英文双语切换 (Vue I18n)
- **🎨 主题定制** — 外观模式、配色、布局、字体等详细设置
- **📱 响应式设计** — 完美适配桌面和移动设备
- **🧭 智能导航** — 可折叠的响应式侧边栏菜单
- **🏷️ 标签栏管理** — 多标签页管理，支持页面缓存和快捷操作
- **✅ 表单验证** — 强大的表单验证和类型安全
- **📊 数据表格** — 功能丰富的数据展示、排序和筛选
- **📦 JSON 配置化组件** — Table/Form/Modal/Drawer 低代码组件
- **🔐 RBAC 权限控制** — 基于角色的权限管理系统
- **🎨 流式输出MD** — 支持流式输出和各种格式的Markdown组件
- **🛡️ 错误边界** — 组件级错误捕获和处理

## 📋 环境要求

- **Node.js**: `>= 18.0.0`
- **pnpm**: `>= 10.29.1`

## 🚦 快速开始

### 1. 安装 pnpm（如尚未安装）

```bash
npm install -g pnpm
```

### 2. 安装依赖

```bash
pnpm install
```

### 3. 启动开发服务器

```bash
pnpm dev
```

### 4. 构建生产版本

```bash
pnpm build
```

### 5. 预览生产构建

```bash
pnpm preview
```

### 6. 类型检查

```bash
pnpm lint
```

### 7. 运行测试

```bash
# 交互式测试模式
pnpm test
```

## 📁 项目结构

```
src/
├── api/                    # API 接口模块
├── assets/                # 静态资源
│   └── styles/              # 全局样式
│   └── images/              # 图片资源
│   └── svg/                 # SVG 图标资源
├── components/            # 组件=
├── hooks/                # hook函数
├── http/                 # HTTP 请求
│   └── config/                 # HTTP 请求配置
│   └── helper/                # HTTP 请求辅助函数
│   └── interface/             # HTTP 请求接口定义
│   └── index.ts               # HTTP 主函数
├── constants/            # 常量定义
├── locales/                 # 国际化相关
├── layouts/              # 布局组件
├── router/               # 路由配置
├── stores/               # Pinia 状态管理
├── views/                # 页面视图
├── App.vue               # 根组件
└── main.ts               # 入口文件

scripts/                     # 脚本文件
public/                   # 公共资源
```

## 🧩 组件库

### Table — JSON 配置化表格

基于 ProTable 配置化表格组件，支持行选择、分页、排序、筛选、展开行、操作列等功能。

```vue
<script setup lang="ts">
import ProTable from '@/components/table/index.vue'
</script>

<template>
  <ProTable :columns="columns" :data="data">
    <template #status="{ text }">
      <span :class="text === 'active' ? 'text-green-500' : 'text-red-500'">
        {{ text }}
      </span>
    </template>
  </ProTable>
</template>
```

### Form — JSON 配置化表单

基于 ProForm 配置化表单组件，支持 36+ 种字段类型、表单验证、字段联动、搜索表单模式。

```vue
<template>
  <div>具体使用方式查看源码</div>
</template>
```

### useModal 函数式弹窗

```vue
<script setup lang="ts">
import { useModal } from '@/hooks/useModal'

const { Modal } = useModal('dialog/drawer')
</script>

<template>
  <Modal>
    <p>内容</p>
  </Modal>
</template>
```


> 📖 完整 API 文档请查看组件源码：`src/components/`
## 🛣️ 路由架构

项目采用动态路由架构，支持从后端获取菜单并动态生成路由：

- **静态路由**: 登录页、404 页面等固定路由
- **动态路由**: 从后端菜单数据动态生成的业务路由
- **路由守卫**: 认证检查、权限验证、菜单加载
- **懒加载**: 所有页面组件使用动态导入，优化首屏性能

```typescript
// 路由配置示例
const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
    meta: { requiresAuth: false, titleKey: 'pages.login.title' }
  },
  {
    path: '/',
    name: 'Root',
    component: () => import('@/layouts/AdminLayout.vue'),
    meta: { requiresAuth: true },
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/Dashboard.vue'),
        meta: { requiresAuth: true, titleKey: 'menu.dashboard' }
      }
    ]
  }
]
```

## 🔐 权限系统

基于 RBAC（基于角色的访问控制）的权限管理系统：

- **角色管理**: 定义角色及其权限集合
- **权限指令**: `v-permission` 指令控制按钮级权限
- **路由权限**: 页面访问权限控制
- **菜单权限**: 动态菜单根据权限过滤

```vue
<!-- 权限指令示例 -->
<template>
  <button v-permission="['user:create']">
    创建用户
  </button>
  <button v-permission="['user:edit', 'user:admin']">
    编辑
  </button>
</template>
```