先上项目地址：https://github.com/hangjob/vue-bag-admin
再来关注一波：
前言
兄弟们，还在为每次新建管理系统都要从零开始搭架子而头疼吗？还在为各个项目之间代码无法复用、维护成本高而发愁吗？今天给大家安利一款让我相见恨晚的开源框架 —— Vue-Bag-Admin。
说实话，作为一名前端开发者，我经历过太多次这样的场景：今天要做一个订单管理系统，明天要做一个用户中心，后天又要做一个数据统计平台。每次都是复制粘贴老项目，然后删删改改，最后搞得一团糟。直到遇见了这个框架，我才发现原来开发管理系统可以这么优雅。
Vue-Bag-Admin 是一款开箱即用的 Vue3 中后台管理系统框架，核心理念就是让开发者能够以最小的成本完成开发。它的插件化架构设计特别有意思，框架和应用分离，你只需要关注业务逻辑，底层的路由、权限、状态管理这些脏活累活，框架全给你包圆了。
一、为什么选择 Vue-Bag-Admin？
1. 技术栈够新，够主流
现在的前端技术更新迭代太快了，但 Vue-Bag-Admin 采用的都是当前最稳定、最主流的技术栈：Vue3 + Vite5 + Naive UI + Pinia。这意味着什么？意味着你不用担心技术过时，不用担心遇到问题没人能解答，随便去掘金、知乎、GitHub 上搜一搜，全是现成的解决方案。
TailwindCSS 做响应式布局，自动适配 PC 端、平板、手机，再也不用写一堆媒体查询了。Strapi5 作为后端 CMS，Node.js 生态，想用什么技术就用什么技术，完全没有框架限制。
2. 真正的插件化架构
这是我最喜欢的地方。不同于那些让你下载整个源码然后在上面的二次开发的框架，Vue-Bag-Admin 采用 npm 包安装方式。你只需要一行命令：
pnpm i vue-bag-admin --save
然后在 main.js 里三行代码就搞定了：
import install from "vue-bag-admin"const {app} = install()app.mount('#app')就这么简单！框架、路由、状态管理、权限系统、主题系统、中间件系统，所有这些基础功能都已经封装好了，你只需要专注于你的业务代码。
3. 企业级功能一应俱全
权限管理、多语言支持、页面缓存、主题切换、路由动画、布局风格、动态路由、状态管理、请求封装，还有 20 多个现成的页面模板。这些东西如果让你从零开发，至少得几个月时间，现在开箱即用。
二、快速上手，五分钟跑起来
第一步：环境准备
首先你需要安装 Node.js，建议使用 Node 18 或 20 版本。然后安装 pnpm 包管理器：
npm install -g pnpm如果你觉得 npm 安装速度太慢，可以换个源：
npm install -g nrmnrm lsnrm use taobao第二步：初始化项目
创建一个新的项目目录，然后初始化：
npm create vite@latest my-admin -- --template vuecd my-adminpnpm install第三步：安装框架
在项目根目录下执行：
pnpm i vue-bag-admin -S第四步：配置入口文件
打开 src/main.js，清空原有代码，写入：
import install from "vue-bag-admin"const {app} = install()app.mount('#app')第五步：启动开发服务器
pnpm dev打开浏览器访问 localhost:5173，你就能看到一个完整的管理后台了。是不是很简单？五分钟都不用，你就拥有了一个功能完善的管理系统。
三、进阶开发，打造你的专属系统
1. 配置路由系统
默认路由肯定满足不了你的需求，这时候就需要自定义路由了。先安装 vue-router：
pnpm add vue-router -S然后在 main.js 中注册路由插件：
import {createWebHashHistory} from "vue-router"import install from "vue-bag-admin"const {app, framework, plugins} = install()framework.use(plugins.useRouterPlugin)app.mount('#app')如果你想自定义路由，可以这样：
import {createWebHashHistory} from "vue-router"import install from "vue-bag-admin"const {app, framework, plugins} = install()const routes = [ { path: '/', component: () => import('@/layouts/index.vue'), children: [ { path: '/home', name: 'home', component: () => import('@/app/views/home/index.vue'), } ] }, { path: '/about', name: 'about', component: () => import('@/app/views/about/index.vue'), },]framework.use(plugins.useRouterPlugin, { routes})app.mount('#app')2. 动态路由实现
如果你的系统需要根据用户权限动态生成路由，框架也支持。配合接口插件，可以实现真正的权限控制：
import {createWebHashHistory} from "vue-router"import install from "vue-bag-admin"const {app, framework, plugins} = install()const files = import.meta.glob(`@/app/views/*/*.vue`, {eager: true})framework.use(plugins.useRouterPlugin, { files,})framework.use(plugins.useApisPlugin, ['/menus'])app.mount('#app')这样框架会自动从后端获取菜单配置，然后动态生成路由，用户能访问哪些页面，完全由后端控制。
3. 主题系统定制
框架内置了多种主题，你可以在配置文件中轻松切换。如果你想自定义主题，只需要修改 tailwind.config.js 文件，添加你自己的颜色配置。框架会自动应用你的主题，所有组件都会跟着变化。
4. 国际化支持
如果你的系统需要支持多语言，框架内置了 vue-i18n，你只需要在语言包文件中添加对应的翻译，然后在组件中使用 $t() 方法就能实现多语言切换。
四、部署上线，就是这么简单
1. 项目构建
开发完成后，执行构建命令：
npm run build构建成功后，会在根目录生成 dist 文件夹，里面就是打包好的静态文件。
2. 配置压缩
为了减小文件体积，提高加载速度，你可以配置 gzip 压缩。先安装插件：
pnpm add -D vite-plugin-compression然后在 vite.config.js 中配置：
import viteCompression from 'vite-plugin-compression'export default defineConfig({ plugins: [ viteCompression({ threshold: 1024000 // 对大于 1mb 的文件进行压缩 }) ],})3. 路由模式选择
你可以选择 Hash 模式或 History 模式。Hash 模式兼容性好，不会出现 404 问题，但 URL 不好看。History 模式 URL 更美观，但需要服务器配置。
Hash 模式配置：
import {createWebHashHistory} from "vue-router"framework.use(plugins.useRouterPlugin, { history: createWebHashHistory()})History 模式配置：
import {createWebHistory} from "vue-router"framework.use(plugins.useRouterPlugin, { history: createWebHistory(),})4. Nginx 配置
如果你的项目部署在二级目录，比如 https://www.abc.com/app，需要做特殊配置。
Vite 配置：
export default defineConfig({ base: '/app/',})路由配置：
import {createWebHistory} from "vue-router"framework.use(plugins.useRouterPlugin, { history: createWebHistory('/app/'),})Nginx 配置：
server { location /app/ { root /home/web/www/app; try_files $uri $uri/ /app/index.html; }}如果是根目录部署，配置就更简单了：
server { gzip on; listen 80; server_name www.abc.com; location / { root /home/web/www; index index.html index.htm; try_files $uri $uri/ /index.html; } location /api/ { rewrite ^/api/(.*)$ /$1 break; proxy_pass https://www.api.com; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; }}五、实际应用场景
1. 电商后台管理系统
你可以用这个框架快速搭建一个电商后台，包括商品管理、订单管理、用户管理、数据统计等模块。框架内置的表格、表单、图表组件能大大减少你的开发工作量。权限系统可以控制不同角色的访问权限，确保数据安全。
2. 企业内部OA系统
很多企业都有自己的OA系统，审批流程、考勤管理、文档管理、内部通讯等功能都可以基于这个框架快速实现。多语言支持适合跨国企业使用，主题系统可以自定义企业品牌色。
3. 数据分析平台
框架内置的 ECharts 图表库可以帮你快速搭建数据可视化平台，实时展示各种业务指标。响应式设计让用户可以在手机上随时查看数据报表。
4. 内容管理系统（CMS）
配合 Strapi5 后端，你可以快速开发一个功能完善的 CMS，支持内容发布、审核、归档等全流程。框架的插件化架构让你可以轻松扩展新的功能模块。
5. SaaS 平台
如果你正在开发一个 SaaS 平台，这个框架的多租户支持、权限控制、主题定制等功能都能派上用场。不同客户可以有自己的域名和主题，底层代码却是同一套，维护起来特别方便。
六、小结
Vue-Bag-Admin 真的是一个让我眼前一亮的项目。它不是简单地把一堆组件堆在一起，而是真正从架构层面思考了如何让开发者更高效地构建管理系统。
插件化的设计让框架和应用完全解耦，你可以随时升级框架版本，而不用担心影响你的业务代码。npm 包的发布方式让你可以在多个项目中复用同一套基础代码，大大减少了重复劳动。
更重要的是，这个框架是完全免费的，遵循 MIT 协议，你可以毫无后顾之忧地把它应用到你的商业项目中。
如果你正准备开发一个管理系统，或者正在为现有项目的维护成本而烦恼，不妨试试 Vue-Bag-Admin。说不定它就像当初的我一样，让你相见恨晚。