Vue3.0 管理后台基础框架模板 （composition api + element-plus）

vue3-element-plus-admin主要目的在于学习 vue3 + ts,功能在完善中,基于的 RBAC 权限控制,后续会 持续迭代更新。

后端是基于 java 的 springboot,目前完整版后端代码 暂未开源。后期完善之后可能 会开源完整后端代码。目前开源了基础版的后端代码

若该项目有帮助到你可以翻到底部 添加作者微信/QQ，如果使用中遇到什么问题可以在交流群中说明你遇到的问题，大佬们都会积极的给你解决。

若Github项目下载代码过慢或失败，可以翻到底部，关注公众号获取基础版 base-refactoring 分支的前后端代码

简介

vue3-element-plus-admin 是一个管理后台基础功能框架，基于 vue3 、 element-plus 和 typescript 实现。内置了 i18n 国际化，动态路由，权限验证。

注： 由于国内项目使用国际化功能的比较少，所以主分支没有添加国际化功能，如有需要可以参考 composition-api 分支。

• 开发文档

• 在线预览(暂时不可用)

• 开发文档(备用-服务器比较low，访问有点慢！)

• 在线预览(备用-服务器比较low，访问有点慢！)

默认 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  # 测试环境

其它开源项目

java-admin-base

是一个管理后台基础功能框架 base-refactoring 分支的后端代码，基于 java 的 springboot

vue3-element-plus-im

是一个即时聊天系统，基于 vue3 、 element-plus 实现。内置了好友私聊功能。

java-im

是vue3-element-plus-im即时聊天系统的 java 后端代码，springboot 基于 netty 、 shiro 实现。