# enba-vue3-template

**Repository Path**: mn_cxy/enba-vue3-template

## Basic Information

- **Project Name**: enba-vue3-template
- **Description**: 🚀一个基于 Vue3 + Vite + Element Plus + Pinia 的现代化中后台管理系统脚手架。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-23
- **Last Updated**: 2025-08-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3中后台管理系统脚手架

一个基于 Vue3 + Vite + Element Plus + Pinia 的现代化中后台管理系统脚手架。

## 🚀 技术栈

- **前端框架**: Vue 3.3.4
- **构建工具**: Vite 4.4.5
- **UI组件库**: Element Plus 2.3.8
- **状态管理**: Pinia 2.1.6
- **路由管理**: Vue Router 4.2.4
- **HTTP客户端**: Axios 1.4.0
- **样式预处理**: SCSS
- **代码规范**: ESLint

## ✨ 功能特性

- 🔐 用户认证系统（登录/注册）
- 👥 用户管理（增删改查）
- 🎭 角色管理（增删改查）
- 🔒 权限管理（增删改查）
- 📋 菜单管理（动态菜单树）
- 📊 数据统计仪表板
- 🎨 现代化UI设计
- 📱 响应式布局
- 🔒 路由权限控制
- 📝 表单验证
- 🗂️ 分页组件
- 🔍 搜索过滤
- 📋 批量操作

## 📁 项目结构

```
src/
├── api/                 # API接口
│   ├── auth.js         # 认证相关接口
│   ├── user.js         # 用户管理接口
│   ├── role.js         # 角色管理接口
│   └── permission.js   # 权限管理接口
├── components/          # 公共组件
├── layout/             # 布局组件
│   └── Layout.vue      # 主布局
├── router/             # 路由配置
│   └── index.js        # 路由主文件
├── stores/             # 状态管理
│   └── user.js         # 用户状态
├── styles/             # 样式文件
│   └── index.scss      # 全局样式
├── utils/              # 工具函数
│   ├── auth.js         # 认证工具
│   └── request.js      # HTTP请求封装
├── views/              # 页面组件
│   ├── auth/           # 认证页面
│   │   ├── Login.vue   # 登录页
│   │   └── Register.vue # 注册页
│   ├── dashboard/      # 仪表板
│   │   └── Index.vue   # 首页
│   └── system/         # 系统管理
│       ├── user/       # 用户管理
│       ├── role/       # 角色管理
│       └── permission/ # 权限管理
├── App.vue             # 根组件
└── main.js             # 入口文件
```

## 🛠️ 安装和运行

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 安装依赖

```bash
npm install
# 或
yarn install
```

### 开发环境运行

```bash
npm run dev
# 或
yarn dev
```

### 快速启动（Windows）

双击运行 `start-dev.bat` 文件，脚本会自动：
1. 检查并安装依赖
2. 启动开发服务器
3. 显示访问信息

### 生产环境构建

```bash
npm run build
# 或
yarn build
```

### 预览构建结果

```bash
npm run preview
# 或
yarn preview
```

## 🔧 配置说明

### Mock数据

项目内置了完整的Mock数据服务，包括：
- 用户认证（登录/注册/登出）
- 用户管理（增删改查）
- 角色管理（增删改查）
- 权限管理（增删改查）

**默认测试账号：**
- 用户名：`admin`
- 密码：`123456`

### 环境变量

项目支持以下环境变量：

- `VITE_API_BASE_URL`: API基础URL（默认: /api）
- `VITE_APP_TITLE`: 应用标题

### 代理配置

开发环境下的API代理配置在 `vite.config.js` 中：

```javascript
proxy: {
  '/api': {
    target: 'http://localhost:8080',
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/api/, ''),
  },
}
```

## 📱 页面说明

### 登录页面 (`/login`)
- 用户名/密码登录
- 表单验证
- 记住登录状态

### 注册页面 (`/register`)
- 用户注册
- 密码确认验证
- 邮箱格式验证

### 首页 (`/dashboard`)
- 系统统计信息
- 最近登录记录
- 系统信息展示

### 用户管理 (`/user`)
- 用户列表展示
- 新增/编辑/删除用户
- 搜索和筛选
- 批量操作
- 分页显示

### 角色管理 (`/role`)
- 角色列表管理
- 角色权限分配
- 角色状态控制

### 权限管理 (`/permission`)
- 权限树形结构
- 菜单/按钮/接口权限
- 权限层级管理

### 菜单管理 (`/menu`)
- 动态菜单树管理
- 支持多级菜单结构
- 菜单图标和排序配置

## 🔒 权限控制

系统采用基于角色的访问控制（RBAC）模型：

1. **用户**：系统使用者
2. **角色**：权限的集合
3. **权限**：具体的操作权限

用户通过分配角色来获得相应的权限，支持多角色分配。

## 🎨 主题定制

项目使用 Element Plus 组件库，支持主题定制：

- 修改 `src/styles/index.scss` 中的变量
- 使用 CSS 变量进行主题切换
- 支持暗色/亮色主题

## 📦 构建部署

### 构建优化

- 代码分割
- 资源压缩
- Tree Shaking
- 懒加载

### 部署说明

1. 执行 `npm run build` 生成生产文件
2. 将 `dist` 目录部署到Web服务器
3. 配置服务器支持 SPA 路由

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交代码
4. 创建 Pull Request

## 📄 许可证

MIT License

## 📞 联系方式

如有问题或建议，请提交 Issue 或联系开发团队【恩爸编程】。

---

**注意**: 这是一个前端脚手架项目，需要配合后端API使用。请根据实际需求修改API接口和数据结构。