hangjob/vue-bag-admin

插件化、可拆包、面向业务增长的 Vue3 中后台解决方案

Vue

1,331

15 commits

updated Sep 1, 2026

See the code

README

Vue-Bag-Admin Logo

Vue-Bag-Admin

插件化、可拆包、面向业务增长的 Vue3 中后台解决方案

在线体验 · 文档地址 · 快速开始 · 插件开发

Vue 3.5 Vite 6 Naive UI TailwindCSS pnpm workspace MIT License


Vue-Bag-Admin 不只是一个后台工程模板,也是一套正在拆包发布的插件化后台生态。它把布局、权限、路由、请求、Schema UI 和插件引导收敛到统一主包中,让业务项目可以先轻量启动,再按需接入独立插件。

你可以直接用脚手架创建一个新的后台宿主,也可以在当前 Monorepo 中开发框架、插件、文档站和参考后端。

为什么选择

能力你会得到什么
插件化架构核心框架与业务模块解耦,商城、系统设置等能力可以作为独立插件接入。
主包优先业务项目默认只安装 vue-bag-admin,避免一开始就被完整 Monorepo 绑住。
权限闭环支持动态路由、菜单权限、按钮级权限,并可与 Strapi5 配合完成全栈权限流转。
工程化基础pnpm workspace 管理多包协作,内置宿主应用、文档站、参考后端和脚手架。
现代 UI 栈Vue3、Vite6、Naive UI、TailwindCSS、Pinia、Vue Router 组成稳定开发底座。
开箱即用登录、Dashboard、布局、403、404、请求封装等后台基础能力已经准备好。

适合场景

场景推荐用法
快速搭建业务后台使用 create-vue-bag-admin 创建最小宿主项目。
沉淀公司内部后台基座基于 vue-bag-admin 主包扩展业务规范和 UI 约定。
拆分复用业务模块将业务能力封装为 @bag/plugin-* 插件,按需接入不同宿主。
学习中后台工程实践阅读 Monorepo、宿主、插件、请求、Schema UI 与 Strapi5 后端实现。

快速开始

创建新的后台项目

npx create-vue-bag-admin my-admin
cd my-admin
pnpm install
pnpm dev

脚手架当前使用 templates/basic 生成最小宿主模板,默认只安装 vue-bag-admin。当项目需要商城、系统设置等官方业务能力时,再按需安装对应的 @bag/plugin-* 插件即可。

开发当前 Monorepo

pnpm install
pnpm --filter admin dev

如果需要同时运行参考后端,请先准备 MySQL 数据库 vue_bag_admin,再启动 Strapi:

cd apps/strapi
cp .env.example .env
pnpm dev

环境要求

依赖版本
Node.jsv24.4.1 或更高版本
pnpmv9 或更高版本
MySQL8.0 或更高版本,仅 Strapi5 参考后端需要

仓库中的 .nvmrc / .nvmdrc 使用完整版本号 24.4.1,避免部分版本管理工具无法解析 24 简写。

项目结构

Vue-Bag-Admin
├── apps
│   ├── admin                 # 前端宿主应用 (Vue3)
│   ├── docs                  # VitePress 官方文档
│   └── strapi                # 参考后端服务 (Strapi 5)
├── packages
│   ├── core                  # 协议层:插件、路由 meta、Schema 等
│   ├── host-vue              # 宿主层:布局、权限、路由、插件引导
│   ├── request               # 请求能力层
│   ├── ui                    # Schema 驱动的 UI 组件层
│   ├── vue-bag-admin         # 面向业务项目的统一主包
│   ├── create-vue-bag-admin  # 初始化脚手架
│   └── plugin-*              # 官方业务插件与示例插件
├── pnpm-workspace.yaml       # Monorepo 配置
└── package.json

包生态

包名定位说明
vue-bag-admin统一主包默认聚合宿主、请求、UI 和协议能力,是业务项目的首选入口。
@bag/core协议层定义插件接口、路由 meta、Schema 协议等基础约定。
@bag/host-vue宿主层负责布局、权限、路由注册和插件引导。
@bag/request请求层统一 HTTP / WS 能力,并内置基于 Lodash 的请求防抖 / 节流包装器。
@bag/ui组件层承载 PmProTable、PmProForm、PmSchemaForm 等 Schema 驱动组件。
@bag/plugin-shop业务插件官方商城示例插件。
@bag/plugin-sys-setting业务插件官方系统设置示例插件。
create-vue-bag-admin脚手架快速创建后台宿主项目。

常用命令

命令说明
pnpm install安装 Monorepo 依赖。
pnpm --filter admin dev启动前端宿主应用。
pnpm --filter @bag/docs dev启动 VitePress 文档站。
pnpm dev启动除 Strapi 外的开发任务。
pnpm dev:all启动全部开发任务。
pnpm build构建所有包和应用。
pnpm check-types执行类型检查。

延伸阅读

交流

如果你想交流使用体验、插件设计,或者一起补齐项目的能力边界,可以访问联系页面。

naive-ui
pinia
vite5
vue3
vue-router4

Project health

Latest release

6.1.0 · Jul 25, 2026

Releases this year

2

Significant stargazers

zy

587 followers · starred Jun 2024

Wesley Liddick

832 followers · starred Jun 2022

Muyao

31 followers · starred Dec 2021

hangjob/vue-bag-admin

插件化、可拆包、面向业务增长的 Vue3 中后台解决方案

Vue

1,331

15 commits

updated Sep 1, 2026

See the code

README

Vue-Bag-Admin Logo

Vue-Bag-Admin

插件化、可拆包、面向业务增长的 Vue3 中后台解决方案

在线体验 · 文档地址 · 快速开始 · 插件开发

Vue 3.5 Vite 6 Naive UI TailwindCSS pnpm workspace MIT License


Vue-Bag-Admin 不只是一个后台工程模板,也是一套正在拆包发布的插件化后台生态。它把布局、权限、路由、请求、Schema UI 和插件引导收敛到统一主包中,让业务项目可以先轻量启动,再按需接入独立插件。

你可以直接用脚手架创建一个新的后台宿主,也可以在当前 Monorepo 中开发框架、插件、文档站和参考后端。

为什么选择

能力你会得到什么
插件化架构核心框架与业务模块解耦,商城、系统设置等能力可以作为独立插件接入。
主包优先业务项目默认只安装 vue-bag-admin,避免一开始就被完整 Monorepo 绑住。
权限闭环支持动态路由、菜单权限、按钮级权限,并可与 Strapi5 配合完成全栈权限流转。
工程化基础pnpm workspace 管理多包协作,内置宿主应用、文档站、参考后端和脚手架。
现代 UI 栈Vue3、Vite6、Naive UI、TailwindCSS、Pinia、Vue Router 组成稳定开发底座。
开箱即用登录、Dashboard、布局、403、404、请求封装等后台基础能力已经准备好。

适合场景

场景推荐用法
快速搭建业务后台使用 create-vue-bag-admin 创建最小宿主项目。
沉淀公司内部后台基座基于 vue-bag-admin 主包扩展业务规范和 UI 约定。
拆分复用业务模块将业务能力封装为 @bag/plugin-* 插件,按需接入不同宿主。
学习中后台工程实践阅读 Monorepo、宿主、插件、请求、Schema UI 与 Strapi5 后端实现。

快速开始

创建新的后台项目

npx create-vue-bag-admin my-admin
cd my-admin
pnpm install
pnpm dev

脚手架当前使用 templates/basic 生成最小宿主模板,默认只安装 vue-bag-admin。当项目需要商城、系统设置等官方业务能力时,再按需安装对应的 @bag/plugin-* 插件即可。

开发当前 Monorepo

pnpm install
pnpm --filter admin dev

如果需要同时运行参考后端,请先准备 MySQL 数据库 vue_bag_admin,再启动 Strapi:

cd apps/strapi
cp .env.example .env
pnpm dev

环境要求

依赖版本
Node.jsv24.4.1 或更高版本
pnpmv9 或更高版本
MySQL8.0 或更高版本,仅 Strapi5 参考后端需要

仓库中的 .nvmrc / .nvmdrc 使用完整版本号 24.4.1,避免部分版本管理工具无法解析 24 简写。

项目结构

Vue-Bag-Admin
├── apps
│   ├── admin                 # 前端宿主应用 (Vue3)
│   ├── docs                  # VitePress 官方文档
│   └── strapi                # 参考后端服务 (Strapi 5)
├── packages
│   ├── core                  # 协议层:插件、路由 meta、Schema 等
│   ├── host-vue              # 宿主层:布局、权限、路由、插件引导
│   ├── request               # 请求能力层
│   ├── ui                    # Schema 驱动的 UI 组件层
│   ├── vue-bag-admin         # 面向业务项目的统一主包
│   ├── create-vue-bag-admin  # 初始化脚手架
│   └── plugin-*              # 官方业务插件与示例插件
├── pnpm-workspace.yaml       # Monorepo 配置
└── package.json

包生态

包名定位说明
vue-bag-admin统一主包默认聚合宿主、请求、UI 和协议能力,是业务项目的首选入口。
@bag/core协议层定义插件接口、路由 meta、Schema 协议等基础约定。
@bag/host-vue宿主层负责布局、权限、路由注册和插件引导。
@bag/request请求层统一 HTTP / WS 能力,并内置基于 Lodash 的请求防抖 / 节流包装器。
@bag/ui组件层承载 PmProTable、PmProForm、PmSchemaForm 等 Schema 驱动组件。
@bag/plugin-shop业务插件官方商城示例插件。
@bag/plugin-sys-setting业务插件官方系统设置示例插件。
create-vue-bag-admin脚手架快速创建后台宿主项目。

常用命令

命令说明
pnpm install安装 Monorepo 依赖。
pnpm --filter admin dev启动前端宿主应用。
pnpm --filter @bag/docs dev启动 VitePress 文档站。
pnpm dev启动除 Strapi 外的开发任务。
pnpm dev:all启动全部开发任务。
pnpm build构建所有包和应用。
pnpm check-types执行类型检查。

延伸阅读

交流

如果你想交流使用体验、插件设计,或者一起补齐项目的能力边界,可以访问联系页面。

naive-ui
pinia
vite5
vue3
vue-router4

Project health

Latest release

6.1.0 · Jul 25, 2026

Releases this year

2

Significant stargazers

zy

587 followers · starred Jun 2024

Wesley Liddick

832 followers · starred Jun 2022

Muyao

31 followers · starred Dec 2021