Vue3+ElementPlus管理バックグラウンドシステム

この記事は、一緒に金の創造の道を始めるための「新人創造セレモニー」イベントに参加しました。

Java + Vueには多くの優れたバックグラウンド管理システムがありますが、バックグラウンド権限管理システムを効率的に開発するために、著者は自分でvue3-element-plus-adminを開発しました。
vue3-element-plus-adminは、Vue3 + Element-plus + Javaに基づくマルチエンタープライズのバックグラウンド権限管理システムであり、完全な権限システムを提供し、開発者が特定のビジネスに集中できるようにし、開発コストを削減し、プロジェクトの効率を向上させます。ウェブサイト管理のバックグラウンド、SAAS、CMS、CRM、OA、ERPなどに使用できます。企業と個人の両方が無料で使用できます。PR（要件）の送信へようこそ。開発中に問題が発生した場合は、Githubで問題を送信できます。

気分が良ければ、⭐starをクリックしてサポートしてください。これが私の最大のサポートと励ましになります！

内蔵機能

分支

master 轻量版本：多企业后台管理，持续维护分支
base-refactoring 精简版本：单个企业基于 RBAC 的权限功能-仅包含 菜单管理、角色管理、用户管理 三个模块
composition-api 内置__Type Script、I18n__，已停止维护可以参考相关的配置
class-style 使用 class 风格开发，内置__Type Script、I18n__，已停止维护可以参考相关的配置
single 该分支为之前单个企业版本的代码
说明:他のブランチは、開発時に作成者が使用するブランチです。作成者の継続的な最適化、リファクタリング、バージョンの反復により、composition-apiとclass-styleは同期的かつ反復的に更新されません。したがって、これら2つのブランチは参照学習に推奨されます。

環境ニーズ

ノード=>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 页面模块

复制代码

発展させる

# 克隆项目
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 `` `>エクスペリエンスユーザーがダーティデータを追加できないようにし、一部の操作権限が開かれませんデモアカウント用