# el-admin

**Repository Path**: phpstart/el-admin

## Basic Information

- **Project Name**: el-admin
- **Description**: vite+eladmin-plus自己制作的后台管理系统
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-12-16
- **Last Updated**: 2026-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# el-admin 后台管理系统

基于 Vue 3 + Vite + Element Plus 的现代化后台管理系统，提供完善的权限管理和动态路由功能。

## ✨ 特性

- 🚀 **现代化技术栈** - 使用 Vue 3 Composition API + Vite 构建
- 🎨 **UI 组件库** - 集成 Element Plus，提供丰富的组件
- 🔐 **权限管理** - 完善的基于角色和权限的访问控制系统
- 📱 **动态路由** - 支持从后端获取菜单和权限配置
- 🌍 **国际化** - 内置中文语言包，易于扩展
- 📊 **数据可视化** - 集成 ECharts 图表库
- 🎯 **状态管理** - 使用 Pinia 进行状态管理
- 📦 **代码分割** - 优化的打包策略，提升加载性能

## 🛠️ 技术栈

- **框架**: Vue 3.5.24
- **构建工具**: Vite (rolldown-vite@7.2.5)
- **UI 库**: Element Plus 2.13.0
- **状态管理**: Pinia 3.0.4
- **路由**: Vue Router 4.6.4
- **HTTP 客户端**: Axios 1.13.2
- **图表**: ECharts 6.0.0
- **工具库**: @vueuse/core, lodash-es, dayjs

## 📦 安装

```bash
# 克隆项目
git clone <repository-url>

# 进入项目目录
cd el-admin

# 安装依赖
npm install
```

## 🚀 运行

### 开发环境

```bash
npm run dev
```

项目将在 `http://localhost:88` 启动

### 生产构建

```bash
npm run build
```

### 预览生产构建

```bash
npm run preview
```

## 📁 项目结构

```
el-admin/
├── public/              # 静态资源
├── src/
│   ├── api/            # API 接口
│   ├── assets/         # 资源文件
│   ├── components/     # 公共组件
│   ├── directives/     # 自定义指令
│   ├── hooks/          # 组合式函数
│   ├── layout/         # 布局组件
│   ├── plugins/        # 插件
│   ├── router/         # 路由配置
│   ├── stores/         # Pinia 状态管理
│   ├── styles/         # 全局样式
│   ├── utils/          # 工具函数
│   ├── views/          # 页面组件
│   ├── App.vue         # 根组件
│   └── main.js         # 入口文件
├── .env                # 环境变量
├── .env.development    # 开发环境变量
├── .env.production     # 生产环境变量
├── .env.staging        # 预发布环境变量
├── index.html          # HTML 模板
├── package.json        # 项目配置
└── vite.config.js      # Vite 配置
```

## 🔧 环境变量

项目支持多环境配置，通过 `.env` 文件管理：

- `.env` - 所有环境的默认配置
- `.env.development` - 开发环境配置
- `.env.production` - 生产环境配置
- `.env.staging` - 预发布环境配置

### 主要配置项

```bash
# API 配置
VITE_API_BASE_URL=/api
VITE_API_TIMEOUT=30000
VITE_API_PREFIX=api
VITE_MENU_SOURCE=api

# 功能开关
VITE_ENABLE_MOCK=true
VITE_ENABLE_CACHE=true
VITE_ENABLE_DEBUG=true

# 上传配置
VITE_UPLOAD_MAX_SIZE=10
VITE_UPLOAD_ALLOWED_TYPES=image/*,application/pdf
```

## 🔐 权限系统

系统实现了完善的权限控制机制：

### 路由权限

- 支持基于角色的路由访问控制
- 支持基于权限点的细粒度控制
- 动态路由根据用户权限自动生成

### 使用示例

```javascript
// 路由配置示例
{
  path: '/system/user',
  name: 'SystemUser',
  component: () => import('@/views/system/user/index.vue'),
  meta: {
    title: '用户管理',
    permission: 'system:user:view',  // 权限点
    roles: ['admin', 'manager']       // 角色要求
  }
}
```

## 📝 开发指南

### 添加新页面

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

### 添加新 API

1. 在 `src/api/` 下创建或编辑对应的 API 文件
2. 使用统一的 axios 实例进行请求

### 状态管理

使用 Pinia 进行状态管理，stores 位于 `src/stores/`：

- `auth.js` - 认证状态
- `menu.js` - 菜单状态
- `permission.js` - 权限状态
- `user.js` - 用户信息

## 🎯 代码规范

### 推荐的开发工具

- VS Code
- Volar 插件（Vue 3 支持）

### 代码风格

- 使用 ES6+ 语法
- 组件使用 Composition API
- 遵循 Vue 3 官方风格指南

## 🔍 性能优化

项目已实现以下优化：

- ✅ 路由懒加载
- ✅ 组件按需加载
- ✅ 代码分割（vue-vendor, element-ui, core-utils）
- ✅ 资源压缩
- ✅ Gzip 压缩分析

## 🐛 调试

开发环境下，路由守卫会输出详细的权限检查日志，便于调试权限相关问题。

## 📄 许可证

[MIT License](LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系方式

如有问题，请通过以下方式联系：

- 提交 Issue
- 发送邮件至项目维护者

---

**注意**: 生产环境部署前，请确保：
1. 修改 API 代理配置
2. 配置正确的后端接口地址
3. 移除或禁用调试日志
4. 检查环境变量配置