kyle2cj / vue3-element-plus-admin

vue3-element-plus-admin vue3.0 ts typescript element-plus vue-cli vue-router i18n vuex composition-api class-style 管理端 后台管理 admin模版框架 后端权限控制 动态加载路由 国际化 前端vue 后端java springboot 【私活神器，私活利器】

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

后端是基于 java 的 springboot,目前 暂未开源。后期完善之后 会开源后端代码。
目前只提供基础功能的后端代码，若有需要可翻到底部 添加微信/QQ 索取后端代码。

简介

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

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

默认 master 分支默认使用 composition-api ，若需要 class 风格 + Typescript 请使用class-style分支，若需要 composition-api + Typescript + I18n 请使用composition-api分支，若只需要 基础版本 请使用base分支，但它们不会和 master 保持同步更新

分支

• master 轻量版本：持续维护分支
• base 精简版本：基于 RBAC 的权限功能-仅包含 菜单管理、角色管理、用户管理 三个模块
• composition-api 内置__Type Script、I18n__
• class-style 使用 class 风格开发，内置__Type Script、I18n__

功能模块

• 菜单管理
• 角色管理
• 账户管理
• 定时任务
• 文件管理
• 备份管理
• 发送邮件/邮件记录
• 区域管理
• 代码生成器
• 接口文档
• SQL监控
• 登录日志
• 定时任务日志
• 操作日志
• 异常日志

项目结构

vue3-src
├─api 接口模块
│
├─assets 静态资源模块
│  ├─icon svg图标
│  ├─images 图片
│  └─sass 样式
│ 
├─components 全局组件模块
│  └─gl-svg svg图标组件
│ 
├─directive 全局自定义指令
│ 
├─element element-plus按需加载
│ 
├─mixins 代码复用 （vue2混入）
│  ├─instance element的$message、$confirm、$loading可进行补充
│  └─page 分页
│ 
├─router 动态路由
│ 
├─store vuex
│  ├─modules
│  │  ├─menu 菜单模块
│  │  ├─setting 设置模块
│  │  ├─tab 标签页模块
│  │  └─user 用户登录信息模块
│  └─index 动态加载模块
│ 
├─types typescript接口
│ 
├─utils 工具模块
│  ├─constants 常量
│  ├─index 工具
│  ├─regular 正则
│  ├─request axios二次封装
│  └─storage 本地缓存工具
│
├─views 视图模块
│  ├─components
│  │  ├─iframe iframe组件用于加载其他页面
│  │  ├─language 国际化设置组件
│  │  └─page 分页组件
│  ├─global
│  │  ├─401 401页面
│  │  ├─404 404页面
│  │  └─login 登录页面
│  ├─layout
│  │  ├─components
│  │  │  ├─edit-info 修改信息
│  │  │  ├─headbar 顶部导航
│  │  │  ├─sidebar 侧边栏
│  │  │  └─tabsbar 标签页
│  │  └─index 布局入口页面
│  └─modules 页面模块

开发

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

# 进入项目目录
cd vue3

# 安装依赖
npm install

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

# 发布
npm run build:dev   # 开发环境
npm run build:prod  # 正式环境
npm run build:test  # 测试环境

联系方式