Vue3 + ElementPlus的管理后台系统_vue3-element-plus-admin

作者：我家自动化 | 2024-03-12 20:30:48

踩

vue3-element-plus-admin

       Java + Vue 有很多优秀的后台管理系统，但是为了可以高效的开发后台权限管理系统，作者就自己开发出 vue3-element-plus-admin。

       vue3-element-plus-admin 是一个基于 Vue3 + Element-plus + Java 的多企业后台权限管理系统，提供了完善的权限体系，让开发者把注意力集中到具体业务当中，降低开发成本，提高项目效率。
       可以用于网站管理后台、SAAS、CMS、CRM、OA、ERP等，企业和个人都可以免费使用。欢迎提交PR（需求），若开发中遇到问题可以上 Github 提 Issues。

如果觉着还不错，请点个 ⭐star 支持一下吧，这将是对我最大的支持和鼓励！

内置功能

系统管理：基本功能
- 角色：角色菜单权限分配
- 管理员：支持多角色分配，根据角色拥有的菜单权限展示不同的页面
- 菜单管理：支持修改当前企业菜单的名称、图标、排序
日志管理：企业日志
- 登录日志：当前企业管理员登录系统的记录查询
- 操作日志：当前企业管理员对系统的正常操作的记录查询
消息管理：消息的推送以及邮件的发送
- WebSocket：当前企业内 websocket 企业推送记录、系统推送记录查询
- 邮件管理：邮件的相关配置
  - 邮件模版：配置邮件发送的模版：如验证码
  - 邮件记录：企业内发送的邮件记录查询
企业管理：完成企业相关配置
- 企业列表：新增、编辑、删除，系统企业的来源
- 企业角色：新增、编辑、删除企业内的角色
- 企业管理员：新增、编辑、删除企业内的管理员
- 企业菜单：企业拥有菜单权限的配置
数据中心：系统的一些配置管理
- 数据字典：系统内常用且固定的数据的维护
- 配置管理：系统内第三方的配置：如 oss、邮箱
- 文件管理：管理当前系统上传的文件及图片等信息
- 备份管理：对系统数据库的备份与恢复
- 区域管理：级联区域的维护
系统监控：对系统的监控管理
- 在线管理员：当前登录系统的管理员
- 日志：整个系统内的日志
  - 登录日志：系统内所有管理员登录系统的记录查询
  - 操作日志：系统内所有管理员对系统的正常操作的记录查询
  - 异常日志：系统内运行是后的异常记录查询
  - 定时任务日志：系统内定时任务执行的记录查询
开发配置：开发过程中的相关配置操作
- 菜单权限：整个系统内的菜单权限配置，支持拖拽排序
- 定时任务：系统内的所有定时任务维护
- 代码生成器：前端（api.js、list.vue、add-edit.vue）后端单表的增删改查相关代码生成
- 接口文档：后端使用的是 apidoc 生成的接口文档
主题设置：整体页面主题设置，布局设置，暗黑模式

分支

master 轻量版本：多企业后台管理，持续维护分支
base-refactoring 精简版本：单个企业基于 RBAC 的权限功能-仅包含 菜单管理、角色管理、用户管理 三个模块
composition-api 内置__Type Script、I18n__，已停止维护可以参考相关的配置
class-style 使用 class 风格开发，内置__Type Script、I18n__，已停止维护可以参考相关的配置
single 该分支为之前单个企业版本的代码
说明: 其他分支是作者开发时使用的分支, 由于作者不断优化、重构、版本迭代的原因，composition-api 和 class-style 没有同步迭代更新，所以建议这两个分支作为参考学习。

环境需求

Node => 12.0.0
Vue-Cli => 5.0.0
JDK = 1.8.x
Mysql >= 8.0.0

项目结构

vue3-src
├─api 接口模块
│
├─assets 静态资源模块
│  ├─font 字体
│  └─sass 样式
│ 
├─components 通用组件
│  ├─global 全局组件
│  │  ├─container 布局组件
│  │  ├─iconfont 使用阿里图库图标的组件
│  │  ├─page 分页组件
│  │  └─index 统一全局注册
│  ├─collapse 折叠组件
│  ├─container-custom 自定义布局组件
│  ├─container-sidebar 左右布局组件
│  ├─enterprise-sidebar 企业侧边栏组件
│  ├─icon-select-input 阿里图库图标选择组件
│  ├─image-upload-single 单图片上传组件
│  ├─region 区域级联选择组件
│  └─view router-view 视图组件
│ 
├─directive 全局自定义指令
│ 
├─mixins 代码复用 （vue2混入）
│  ├─dictionary 字典
│  ├─model 双向绑定
│  └─page 分页
│ 
├─router 动态路由
│ 
├─store vuex
│  ├─modules
│  │  ├─administrator 管理员登录信息模块
│  │  ├─dictionary 数据字典模块
│  │  ├─enterprise 企业模块
│  │  ├─menu 菜单模块
│  │  ├─setting 设置模块
│  │  ├─tabs 标签页模块
│  │  ├─theme 主题模块
│  │  └─websocket 消息推送模块
│  └─index 动态加载模块
│ 
├─utils 工具模块
│  ├─constant 常量
│  ├─dictionary 字典
│  ├─index 工具
│  ├─prompt 单次提示处理类
│  ├─regular 正则
│  ├─request axios二次封装
│  ├─storage 本地缓存工具
│  └─websocket websocket对象封装
│
├─views 视图模块
│  ├─common 通用页面
│  │  ├─401 401页面
│  │  ├─404 404页面
│  │  ├─500 500页面
│  │  └─login 登录页面
│  ├─layout
│  │  ├─components
│  │  │  ├─headbar 顶部导航
│  │  │  ├─navigation 导航布局组件
│  │  │  ├─sidebar 侧边栏
│  │  │  ├─tabsbar 标签页
│  │  │  └─websocket 消息推送组件
│  │  └─index 布局入口页面
│  └─modules 页面模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

开发

# 克隆项目
git clone https://github.com/gmingchen/vue3-element-plus-admin.git

# 进入项目目录
cd vue3-element-plus-admin

# 安装依赖
npm install

# 若执行 npm install 报错，可能由于node版本太高原因导致，可执行一下命令
npm install --legacy-peer-deps

# 启动服务
npm run dev   # 开发环境
npm run prod  # 正式环境
npm run test  # 测试环境

# 发布
npm run build:dev   # 开发环境
npm run build:prod  # 正式环境
npm run build:test  # 测试环境
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21