Element Plus Admin

基于 Vue 3 + Element Plus 的现代化管理后台系统

技术栈

• 前端框架: Vue 3.5.19 + Composition API
• 构建工具: Vite 7.1.3
• UI 组件库: Element Plus 2.11.0
• 状态管理: Pinia 3.0.3
• 路由管理: Vue Router 4.5.1
• HTTP 客户端: Axios 1.11.0
• 图表库: ECharts 6.0.0
• 富文本编辑器: WangEditor 5.1.23
• 国际化: Vue I18n 11.1.11

项目特性

• ✅ 基于 Vue 3 Composition API
• ✅ 使用 Vite 构建，开发体验极佳
• ✅ 集成 Element Plus 组件库
• ✅ 支持多语言国际化
• ✅ 完整的权限管理系统
• ✅ 动态路由和菜单
• ✅ 响应式设计，支持移动端
• ✅ 丰富的图表和数据可视化
• ✅ 支持多种文件上传方式
• ✅ 完善的错误处理机制

目录结构

element-plus-admin/
├── docs/                   # 项目文档
│   ├── arch.md            # 架构文档
│   └── requirements.md    # 需求文档
├── src/
│   ├── api/               # API 接口
│   ├── components/        # 公共组件
│   ├── layout/           # 布局组件
│   ├── router/           # 路由配置
│   ├── stores/           # 状态管理
│   ├── styles/           # 样式文件
│   ├── utils/            # 工具函数
│   ├── views/            # 页面组件
│   ├── App.vue           # 根组件
│   └── main.js           # 入口文件
├── .env                  # 环境变量
├── .env.development      # 开发环境变量
├── .env.production       # 生产环境变量
├── index.html            # HTML 模板
├── package.json          # 项目配置
├── vite.config.js        # Vite 配置
└── README.md             # 项目说明

快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0 或 yarn >= 1.22.0

安装依赖

# 使用 npm
npm install

# 或使用 yarn
yarn install

启动开发服务器

# 使用 npm
npm run dev

# 或使用 yarn
yarn dev

访问 http://localhost:3000

构建生产版本

# 使用 npm
npm run build

# 或使用 yarn
yarn build

预览生产构建

# 使用 npm
npm run preview

# 或使用 yarn
yarn preview

功能模块

1. 用户认证

• 用户登录/登出
• JWT Token 认证
• 权限验证

2. 系统管理

• 用户管理：用户的增删改查、角色分配
• 角色管理：角色的增删改查、权限分配
• 菜单管理：菜单的增删改查、树形结构

3. 数据可视化

• Dashboard 数据大屏
• ECharts 图表集成
• 实时数据监控

4. 内容管理

• 富文本编辑器
• 文件上传管理
• 分类管理

5. 工具功能

• 二维码生成
• Excel 导入导出
• 多语言切换

开发规范

代码风格

• 使用 ES2020+ 语法特性
• 优先使用 Composition API
• 遵循 Vue 3 最佳实践

命名规范

• 组件名使用 PascalCase
• 文件名使用 kebab-case
• 变量名使用 camelCase

提交规范

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

部署说明

环境配置

1. 复制 .env.production 文件
2. 修改 API 地址和其他配置
3. 执行构建命令

Nginx 配置示例

server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://your-api-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

浏览器支持

• Chrome >= 80
• Firefox >= 75
• Safari >= 13
• Edge >= 80

贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

许可证

本项目采用 ISC 许可证 - 查看 LICENSE 文件了解详情

联系方式

• 作者：tanzhenxing
• 邮箱：your-email@example.com
• 项目地址：https://github.com/shingle666/element-plus-admin

更新日志

v1.0.1 (2024-01-01)

• 初始版本发布
• 完成基础功能开发
• 集成主要第三方库