# vue3-elementPlus-admin

**Repository Path**: SunshineC/vue3-elementPlus-admin

## Basic Information

- **Project Name**: vue3-elementPlus-admin
- **Description**: 基于 vue3.x + CompositionAPI setup 语法糖 + vite + element plus + vue-router-next + pinia 技术的后台开源免费模板，希望减少工作量，实现快速开发，此项目为 JS 非 TS 版本。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 31
- **Forks**: 9
- **Created**: 2023-04-01
- **Last Updated**: 2025-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 + Element Plus 管理后台模板

这是一个基于 Vue 3 + Element Plus + Vite 的现代化管理后台模板，集成了本地 Mock 数据服务。

## 🚀 项目特性

- ✅ **Vue 3** - 使用最新的 Vue 3 Composition API
- ✅ **Element Plus** - 现代化的 UI 组件库
- ✅ **Vite** - 快速的构建工具
- ✅ **Pinia** - 状态管理
- ✅ **Vue Router** - 路由管理
- ✅ **本地 Mock 服务** - 无需后端即可开发
- ✅ **ECharts** - 数据可视化
- ✅ **权限管理** - 基于角色的权限控制
- ✅ **响应式设计** - 适配各种屏幕尺寸

## 📦 技术栈

- **前端框架**: Vue 3.4.15
- **UI 组件库**: Element Plus 2.4.4
- **构建工具**: Vite 5.0.10
- **状态管理**: Pinia 2.1.7
- **路由管理**: Vue Router 4.2.5
- **图表库**: ECharts 5.4.3
- **Mock 服务**: vite-plugin-mock 3.0.0
- **样式预处理**: Sass 1.69.7

## 🛠️ 安装和运行

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
npm install
```

### 开发环境运行

```bash
# 启动开发服务器（带 Mock 数据）
npm run dev

# 或者使用 Mock 模式
npm run mock
```

### 构建生产版本

```bash
npm run build
```

### 预览生产版本

```bash
npm run preview
```

## 📁 项目结构

```
src/
├── api/                 # API 接口
│   ├── user.js         # 用户相关接口
│   └── system.js       # 系统相关接口
├── assets/             # 静态资源
├── components/         # 公共组件
├── directive/         # 自定义指令
├── hooks/             # 自定义 Hooks
├── mock/              # Mock 数据
│   ├── user.js        # 用户 Mock 数据
│   ├── system.js      # 系统 Mock 数据
│   └── index.js       # Mock 入口文件
├── router/            # 路由配置
├── store/             # 状态管理
│   ├── user.js        # 用户状态
│   ├── system.js      # 系统状态
│   └── store.js       # Store 入口
├── style/             # 样式文件
├── utils/             # 工具函数
└── views/             # 页面组件
    ├── home.vue       # 首页
    ├── login/         # 登录页
    ├── layout/        # 布局组件
    └── user-management.vue  # 用户管理
```

## 🔐 登录信息

项目内置了三个测试账号，登录时只需输入用户名和密码（无需验证码）：

| 用户名  | 密码   | 角色    | 权限                  |
| ------- | ------ | ------- | --------------------- |
| admin   | 123456 | admin   | 全部权限              |
| yonghu1 | 123456 | yonghu1 | demo:read, demo:write |
| yonghu2 | 123456 | yonghu2 | demo:read             |

## 📊 Mock 数据

项目集成了完整的 Mock 数据服务，包括：

### 用户管理

- 用户登录/登出
- 获取用户信息
- 用户列表 CRUD 操作

### 系统数据

- 系统统计数据
- 图表数据（用户增长、销售数据、订单状态）
- 系统通知
- 系统配置

### API 接口

所有 API 接口都以 `/api` 开头，例如：

- `POST /api/login` - 用户登录
- `GET /api/userInfo` - 获取用户信息
- `GET /api/users` - 获取用户列表
- `POST /api/users` - 添加用户
- `PUT /api/users/:id` - 更新用户
- `DELETE /api/users/:id` - 删除用户

## 🎨 功能特性

### 1. 首页仪表板

- 用户信息展示
- 统计数据卡片
- 多种图表展示（折线图、饼图、柱状图）
- 系统通知

### 2. 用户管理

- 用户列表展示
- 搜索和筛选
- 添加/编辑/删除用户
- 分页功能
- 角色和权限管理

### 3. 权限控制

- 基于角色的路由权限
- 页面级权限控制
- 组件级权限控制

### 4. 响应式设计

- 适配桌面端和移动端
- 灵活的布局系统
- 现代化的 UI 设计

## 🔧 开发指南

### 添加新的 Mock 接口

1. 在 `mock/` 目录下创建新的 Mock 文件
2. 在 `mock/index.js` 中导入并导出
3. 在对应的 API 文件中添加接口函数

### 添加新的页面

1. 在 `src/views/` 目录下创建页面组件
2. 在 `src/router/routes.js` 中添加路由配置
3. 如需权限控制，在路由 meta 中添加 roles 字段

### 状态管理

使用 Pinia 进行状态管理：

- `useUser` - 用户相关状态
- `useSystem` - 系统相关状态

## 📝 更新日志

### v2.1.1 (2024-01-15)

- 📏 调整侧边栏宽度为 220px 标准

### v2.1.0 (2024-01-15)

- 🔧 去除登录验证码功能，简化登录流程
- 🗑️ 删除不再使用的验证码组件

### v2.0.0 (2024-01-15)

- 🎉 升级到 Vue 3.4.15
- 🎉 升级到 Element Plus 2.4.4
- 🎉 升级到 Vite 5.0.10
- ✨ 集成本地 Mock 服务
- ✨ 新增用户管理功能
- ✨ 新增系统统计和图表
- ✨ 新增通知系统
- 🐛 修复已知问题
- 📚 完善文档

## 🤝 贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

## 📄 许可证

MIT License