Vue3 + ElementPlus 관리 백그라운드 시스템

이 글은 금창조의 길을 함께 시작하는 '신인창조식' 행사에 참여하게 되었습니다.

Java + Vue에는 우수한 백그라운드 관리 시스템이 많이 있지만 백그라운드 권한 관리 시스템을 효율적으로 개발하기 위해 작성자가 직접 vue3-element-plus-admin을 개발했습니다.
vue3-element-plus-admin 은 Vue3 + Element-plus + Java를 기반으로 하는 다중 엔터프라이즈 백그라운드 권한 관리 시스템으로 완전한 권한 시스템을 제공하여 개발자가 특정 비즈니스에 집중할 수 있도록 하여 개발 비용을 절감하고 프로젝트 효율성을 향상시킵니다. 웹사이트 관리 배경, SAAS, CMS, CRM, OA, ERP 등에 사용할 수 있습니다. 기업과 개인 모두 무료로 사용할 수 있습니다. PR 제출을 환영합니다(요구사항) 개발 중 문제가 발생하면 Github에서 Issues를 제출할 수 있습니다.

기분이 좋으시다면 ⭐스타를 눌러주세요~ 제 가장 큰 응원과 격려가 됩니다!

내장 기능

分支

master 轻量版本：多企业后台管理，持续维护分支
base-refactoring 精简版本：单个企业基于 RBAC 的权限功能-仅包含 菜单管理、角色管理、用户管理 三个模块
composition-api 内置__Type Script、I18n__，已停止维护可以参考相关的配置
class-style 使用 class 风格开发，内置__Type Script、I18n__，已停止维护可以参考相关的配置
single 该分支为之前单个企业版本的代码
说明:다른 브랜치는 저자가 개발할 때 사용하는 브랜치로 저자의 지속적인 최적화, 리팩토링, 버전 반복으로 인해 composition-api 와 class-style 이 동기적, 반복적으로 업데이트되지 않으므로 이 두 브랜치는 참조 학습에 권장됩니다.

환경적 필요

노드 => 12.0.0
뷰-클리 => 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 页面模块

复制代码

개발하다

# 克隆项目
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  # 测试环境
复制代码

온라인 미리보기

``` 일반 백그라운드 계정: demo1, demo2, demo3 엔터프라이즈 최고 관리 계정: admin1, admin2, admin3 모든 계정의 암호가 통합됨: superadmin ``` > 경험 사용자가 더티 데이터를 추가하는 것을 방지하고 일부 작업 권한이 열리지 않습니다. 데모 계정용