Twtcer / 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 【私活神器,私活利器】

Home Page:https://github.com/GMingChen/vue3-element-plus-admin

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

vue element-plus typescript

注:目前由于该项目 svg 是保存在项目里面,导致 build 完之后文件过大,首次加载速度过慢。所以准备重构一下该项目,通过阿里图库使用svg图标,并加上企业级管理。会在标签 v5.0.0 上,之后 master 分支也将会在重构之后基础上继续维护!

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

后端是基于 javaspringboot,目前完整版后端代码 暂未开源。后期完善之后可能 会开源完整后端代码。目前开源了基础版的后端代码
若该项目有帮助到你可以翻到底部 添加作者微信/QQ,如果使用中遇到什么问题可以在交流群中说明你遇到的问题,大佬们都会积极的给你解决。

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

简介

vue3-element-plus-admin 是一个管理后台基础功能框架,基于 vue3element-plustypescript 实现。内置了 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 ScriptI18n__
  • class-style 使用 class 风格开发,内置__Type ScriptI18n__
  • 说明: 其他分支是作者开发时使用的分支, 由于 element-plus 版本迭代的原因,项目中间重构过,布局也同步改为 flex 布局。 所以 composition-apiclass-style 版本比较旧一点,建议这两个分支作为参考学习。 masterbase-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  # 测试环境

联系方式

公众号 QQ交流群 微信交流群 微信 QQ
公众号:loafer-man QQ交流群:124371554 微信交流群:124371554 微信:Gy1240235512 QQ:1240235512

其它开源项目

java-admin-base

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

vue3-element-plus-im

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

java-im

vue3-element-plus-im即时聊天系统的 java 后端代码,springboot 基于 nettyshiro 实现。

nod-server 是一个基于 node 开发的后端服务框架,只要你会 SQL 就也可以写接口了,再也不用看后端的脸色了。

About

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

https://github.com/GMingChen/vue3-element-plus-admin

License:MIT License


Languages

Language:Vue 70.0%Language:JavaScript 25.1%Language:SCSS 3.4%Language:HTML 1.5%