DEV Community

Cover image for 🎉Vue3+Vite2.6+TypeScript+ant-design-vue+egg.js
hangjob
hangjob

Posted on

🎉Vue3+Vite2.6+TypeScript+ant-design-vue+egg.js

Bag快速开发管理系统、门户网站、博客系统框架,提供基础的框架,快速搭建企业产品,响应式开发,你可以将它应用在任何需要服务端管理的应用。如:开发管理系统的 API 接口、门户网站博客、企业内部的业务管理、ERP、CMS、APP 的后台等

技术选型

Bag管理系统采用Vue3、Vue-Router4、Vuex4、Ant-Design-Vue、Vite、TypeScript、Egg.js、Mysql构建

Bag门户博客前台采用Vue3、Vue-Router4、Vite 、Pinia、Element-plus、Equal-Vue、Bootstrap、Vite、TypeScript、Egg.js、Mysql构建,按需加载模块,内置丰富UI

一键安装

快速开发,内置集成后台系统、也阔以自定义后台API

npm i vue-bag-admin --save 
Enter fullscreen mode Exit fullscreen mode

应用

import {createApp} from 'vue'
import install from 'vue-bag-admin'
import 'vue-bag-admin/lib/style.min.css'
import App from './App.vue'
import 'vue-bag-admin/mock/admin' // 如果后台服务,不用此mock数据

createApp(App).use(install)
Enter fullscreen mode Exit fullscreen mode

开发

npm run dev
Enter fullscreen mode Exit fullscreen mode

开源地址

文档地址Github源码

演示地址

管理系统演示门户博客前台演示

主要功能

  1. 用户管理:系统管理员分配用户角色和角色权限
  2. 角色管理:创建权限控制的主要对象,可以给角色分配不同api权限和菜单权限
  3. 菜单管理:实现用户动态菜单配置,实现不同角色不同菜单
  4. 富文本编辑器:MarkDown编辑器功能嵌入
  5. 快速表单:一键开发CURD,配置化条件搜索示例
  6. 快速API:基于Egg开发,增删改查API基本样列
  7. 接口设计:模型创建,关联查询,一键接入
  8. 权限指令:组件权限指令封装
  9. 网络配置:基础axios封装,请求重连、错误取消,动态配置
  10. 状态管理:丰富的Vuxe和Pinia任意选择
  11. 路由配置:嵌套路由,动态路由可动态配置,快速呈现
  12. 全局配置:站点基本配置背景图片、Login、Slogan等等
  13. ....

预览

后台

2702235941-62f4f96172d14_fix732.png

前台

2027974419-62f4f9861a4de_fix732.png

Top comments (0)