Vue3.0 管理后台基础框架模板 (composition a
vue3-element-plus-admin主要目的在于学习 vue3
+ ts
,功能在完善中,基于的 RBAC
权限控制,后续会 持续迭代更新
。
后端是基于 java
的 springboot
,目前完整版后端代码 暂未开源
。后期完善之后可能 会开源完整后端代码
。目前开源了基础版的后端代码
若该项目有帮助到你可以翻到底部 添加作者微信/QQ
,如果使用中遇到什么问题可以在交流群中说明你遇到的问题,大佬们都会积极的给你解决。
若Github项目下载代码过慢或失败,可以翻到底部,关注公众号获取基础版
base-refactoring 分支的前后端代码
简介
vue3-element-plus-admin 是一个管理后台基础功能框架,基于 vue3 、 element-plus 和 typescript 实现。内置了 i18n 国际化,动态路由,权限验证。
注:
由于国内项目使用国际化功能的比较少,所以主分支没有添加国际化功能,如有需要可以参考 composition-api 分支。
默认 master 分支默认使用 composition-api ,若需要 class 风格 + Typescript 请使用class-style分支,若需要 composition-api + Typescript + I18n 请使用composition-api分支,若只需要 基础版本 请使用base-refactoring分支,但它们不会和 master 保持同步更新
分支
-
master 轻量版本:持续维护分支
-
base-refactoring 精简版本:基于 RBAC 的权限功能-仅包含
菜单管理
、角色管理
、用户管理
三个模块 -
composition-api 内置
Type Script
、I18n
-
class-style 使用 class 风格开发,内置
Type Script
、I18n
-
说明:
其他分支是作者开发时使用的分支, 由于 element-plus 版本迭代的原因,项目中间重构过,布局也同步改为flex
布局。 所以 composition-api 和 class-style 版本比较旧一点,建议这两个分支作为参考学习。 master 和 base-refactoring 这两个分支是比较新的,可以放心使用。
功能模块
-
角色管理
-
账户管理
-
发送邮件/邮件记录
-
登录日志
-
操作日志
-
定时任务日志
-
异常日志
-
菜单管理
-
数据字典
-
配置管理
-
定时任务
-
文件管理 - 现在默认使用的是七牛云,可直接配置存储位置
-
本地存储
-
七牛云存储
-
-
消息推送
-
区域管理
-
备份管理
-
代码生成器
-
接口文档
-
SQL监控
项目结构
vue3-src
├─api 接口模块
│
├─assets 静态资源模块
│ ├─icon svg图标
│ ├─images 图片
│ └─sass 样式
│
├─components 通用组件
│ ├─global 全局组件
│ │ ├─icon element-plus 内置图标组件重新封装
│ │ ├─page 分页组件
│ │ ├─svg 本地svg图片使用组件
│ │ └─index 统一全局注册
│ ├─editor 富文本组件
│ └─look-around 随便看看按钮组件
│
├─directive 全局自定义指令
│
├─mixins 代码复用 (vue2混入)
│ └─page 分页
│
├─router 动态路由
│
├─store vuex
│ ├─modules
│ │ ├─dictionary 数据字典模块
│ │ ├─menu 菜单模块
│ │ ├─setting 设置模块
│ │ ├─tab 标签页模块
│ │ └─user 用户登录信息模块
│ └─index 动态加载模块
│
├─utils 工具模块
│ ├─constant 常量
│ ├─dictionary 字典
│ ├─index 工具
│ ├─regular 正则
│ ├─request axios二次封装
│ └─storage 本地缓存工具
│
├─views 视图模块
│ ├─global 通用页面
│ │ ├─401 401页面
│ │ ├─404 404页面
│ │ ├─500 500页面
│ │ └─login 登录页面
│ ├─layout
│ │ ├─components
│ │ │ ├─edit-info 修改信息
│ │ │ ├─headbar 顶部导航
│ │ │ ├─sidebar 侧边栏
│ │ │ └─tabsbar 标签页
│ │ └─index 布局入口页面
│ └─modules 页面模块
开发
# 克隆项目
git clone https://github.com/gmingchen/vue3-element-plus-admin.git
# 进入项目目录
cd vue3-element-plus-admin
# 安装依赖
npm install
# 启动服务
npm run dev # 开发环境
npm run prod # 正式环境
npm run test # 测试环境
# 发布
npm run build:dev # 开发环境
npm run build:prod # 正式环境
npm run build:test # 测试环境
其它开源项目
是一个管理后台基础功能框架 base-refactoring 分支的后端代码,基于 java
的 springboot
是一个即时聊天系统,基于 vue3 、 element-plus 实现。内置了好友私聊功能。
是vue3-element-plus-im即时聊天系统的 java
后端代码,springboot
基于 netty 、 shiro 实现。