前端前端开发那些事儿

Vue3.0 管理后台基础框架模板 (composition a

2021-05-09  本文已影响0人  拖孩

先上源码地址:https://github.com/gmingchen/vue3-element-plus-admin

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

简介

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

在线预览

默认 master 分支默认使用 composition-api ,若需要 class 风格请使用class-style分支,但它不会和 master 保持同步更新

vue3-src
├─api 接口模块

├─assets 静态资源模块
│  ├─icon svg图标
│  ├─images 图片
│  └─sass 样式

├─components 全局组件模块
│  └─svg-icon 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 页面模块

如果觉的还凑活,就给个小星星吧!

上一篇下一篇

猜你喜欢

热点阅读