# vue-admin-template

**Repository Path**: web_design_of_web_frontend/vue-admin-template

## Basic Information

- **Project Name**: vue-admin-template
- **Description**: 一个基础的后台管理系统。vue+vite+element-plus。包含：用户管理、部门管理、系统管理、字典管理
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-13
- **Last Updated**: 2025-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue Admin Template

基于 Vue 3 + Element Plus 的后台管理系统模板，集成了用户管理、权限控制、系统配置等常用功能模块。

后台服务地址：[https://gitee.com/web_design_of_web_frontend/egg-server-template](https://gitee.com/web_design_of_web_frontend/egg-server-template)

## 🚀 技术栈

- **前端框架**: Vue 3.4 + Composition API
- **UI框架**: Element Plus
- **状态管理**: Pinia
- **路由**: Vue Router 4
- **构建工具**: Vite 5
- **HTTP客户端**: Axios
- **样式**: SCSS
- **图标**: @element-plus/icons-vue

## 📦 功能特性

- ✅ 用户认证系统（登录/注册/权限管理）
- ✅ 用户管理（CRUD操作、批量操作、状态管理）
- ✅ 部门管理（树形结构、层级关系）
- ✅ 系统配置（参数配置、动态配置）
- ✅ 字典管理（数据字典、类型管理）
- ✅ 响应式设计（适配移动端和桌面端）
- ✅ 主题切换（支持深色/浅色主题）
- ✅ 国际化支持（预留多语言接口）

## 🛠️ 开发环境要求

- **Node.js**: >= 16.0.0
- **npm**: >= 8.0.0
- **浏览器**: Chrome 90+, Firefox 88+, Safari 14+

## 📋 项目结构

```
vue-admin-template/
├── public/                 # 静态资源
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码目录
│   ├── api/              # API接口封装
│   │   ├── auth.js       # 认证相关接口
│   │   ├── user.js       # 用户管理接口
│   │   ├── department.js # 部门管理接口
│   │   ├── config.js     # 系统配置接口
│   │   ├── dict.js       # 字典管理接口
│   │   └── request.js    # Axios请求封装
│   ├── components/       # 可复用组件
│   │   ├── common/       # 通用组件
│   │   ├── layout/       # 布局组件
│   │   └── ui/          # UI组件
│   ├── layouts/         # 布局模板
│   │   ├── AdminLayout.vue  # 后台布局
│   │   └── AuthLayout.vue   # 认证布局
│   ├── router/          # 路由配置
│   │   ├── index.js     # 路由主文件
│   │   ├── guards.js    # 路由守卫
│   │   └── modules/     # 路由模块
│   ├── stores/          # 状态管理
│   │   ├── index.js     # Pinia主文件
│   │   ├── auth.js      # 认证状态
│   │   ├── user.js      # 用户状态
│   │   └── app.js       # 应用状态
│   ├── views/           # 页面组件
│   │   ├── login/       # 登录页面
│   │   ├── dashboard/   # 仪表盘
│   │   ├── user/        # 用户管理
│   │   ├── department/  # 部门管理
│   │   ├── config/      # 系统配置
│   │   └── dict/        # 字典管理
│   ├── App.vue          # 根组件
│   ├── main.js          # 应用入口
│   └── style/           # 样式文件
├── .env                 # 环境变量
├── .env.development   # 开发环境变量
├── .env.production    # 生产环境变量
├── vite.config.js     # Vite配置
├── package.json       # 项目依赖
└── README.md          # 项目说明
```

## 🚦 快速开始

### 1. 克隆项目

```bash
git clone [项目地址]
cd vue-admin-template
```

### 2. 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm
pnpm install
```

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

```bash
# 启动开发服务器，默认端口 3000
npm run dev

# 指定端口启动
npm run dev -- --port 8080
```

### 4. 构建生产版本

```bash
# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

### 5. 代码质量检查

```bash
# ESLint 检查
npm run lint

# 自动修复 ESLint 问题
npm run lint:fix
```

## ⚙️ 环境配置

### 开发环境 (.env.development)

```bash
# 开发环境配置
VITE_API_BASE_URL=/api
VITE_APP_TITLE=Vue Admin Template
VITE_APP_PORT=3000
```

### 生产环境 (.env.production)

```bash
# 生产环境配置
VITE_API_BASE_URL=https://your-api-domain.com
VITE_APP_TITLE=Vue Admin Template
```

## 🔧 开发规范

### 代码规范

- 使用 ESLint + Prettier 进行代码格式化
- 遵循 Vue 3 官方风格指南
- 组件命名采用 PascalCase
- 文件命名采用 kebab-case

### 提交规范

- feat: 新功能
- fix: 修复bug
- docs: 文档更新
- style: 代码格式调整
- refactor: 代码重构
- test: 测试相关
- chore: 构建过程或辅助工具的变动

### 目录规范

- `src/api/` - 所有API接口封装
- `src/components/` - 可复用组件
- `src/views/` - 页面级组件
- `src/stores/` - 状态管理
- `src/router/` - 路由配置

## 🎯 功能模块详解

### 用户认证
- 登录/注册页面
- JWT Token 管理
- 路由守卫权限控制
- 用户信息持久化存储

### 用户管理
- 用户列表分页展示
- 用户增删改查操作
- 用户状态管理（启用/禁用）
- 批量删除功能
- 密码重置功能

### 部门管理
- 部门树形结构展示
- 部门层级关系管理
- 部门成员统计
- 部门选择器组件

### 系统配置
- 系统参数动态配置
- 配置项分类管理
- 配置值类型验证
- 配置变更日志

### 字典管理
- 字典类型管理
- 字典数据管理
- 字典数据缓存
- 字典选择器组件

## 🚀 部署指南

### 1. 静态部署

构建完成后，将 `dist/` 目录下的文件部署到静态服务器：

```bash
# 构建项目
npm run build

# 部署到 nginx
# 将 dist/ 目录下的文件复制到 nginx 的 html 目录
```

### 2. Docker 部署

```dockerfile
# Dockerfile
FROM nginx:alpine
COPY dist/ /usr/share/nginx/html/
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```

### 3. 服务器部署

```bash
# 安装 PM2
npm install -g pm2

# 使用 PM2 部署
pm2 serve dist 3000 --spa
```

## 📱 浏览器兼容性

| 浏览器 | 最低版本 |
|--------|----------|
| Chrome | 90+ |
| Firefox | 88+ |
| Safari | 14+ |
| Edge | 90+ |

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request


## 📄 许可证

[MIT License](LICENSE)

## 🙏 致谢

- [Vue 3](https://vuejs.org/)
- [Element Plus](https://element-plus.org/)
- [Vite](https://vitejs.dev/)
- [Pinia](https://pinia.vuejs.org/)
- [Axios](https://axios-http.com/)

---

**🎉 欢迎使用 Vue Admin Template！** 如果你有任何问题或建议，欢迎随时提出。