做前端这些年，经手过大大小小几十个中后台项目。市面上的开源 Admin 模板很多，UI 一个比一个炫酷。但真用到实际业务里往往有一个致命的痛点：强耦合。

你兴冲冲地拉下代码，发现里面塞满了图表、富文本编辑器、甚至还有花里胡哨的 3D 演示页面。你想做减法，一删文件，路由报错了；怎么说呢，再删，状态管理又抛异常了。整个项目跑都跑不起来，我之前经常要花一整个上午的时间，专门去清理这些简单讲“开箱即用”的屎山雏形。

我不想要一个大而全的全家桶。我想要的是一个干净的底座，加上一堆可以随时拔插的 U 盘。

这也是我写 Vue-Bag-Admin 的初衷。在这个项目里我彻底抛弃了传统的单体架构，尝试用前端微模块的思路。结合最新的全栈技术，重新定义中后台的开发体验。

为什么是这套技术栈？

技术选型不能跟风，得看解决什么实际问题。Vue-Bag-Admin 敲定的主要前端栈是：Vue3 + Vite5 + Naive-ui + Pinia。

说说我这么选的理由。

• Vue3 & Vite5: 标配，无需赘述。
• Naive-ui 而非 Element Plus:
  • Natively TypeScript 完整支持；
  • Themes 基于 CSS 变量，可快速切换；
  • 插件化架构最小样式隔离成本。
• 后端解耦原则：
• No hard dependency on NestJS,Spring Boot 或任何特定后端；
• Agnostic network layer 把请求逻辑统一封装；
• Agnostic business logic 不关心后端语言或框架。

深度解剖的观点是，我的前端插件化架构

在设计这套前端架构时我给自己定了个死规矩：主基座绝对不写具体业务逻辑。

仓库使用 pnpm Workspace，代码分为 apps 与 packages。以 @bag 命名空间统一管理：

• apps/admin: 轻量主基座，只处理登录鉴权、基础状态和 AppLayout。
• packages/core: 插件调度器，统筹所有插件路由、菜单与状态注入。
• packages/ui: 业务无关纯 UI 封装，如 PmProTable。

插件注册与拆分原则：

• MVC+微模块模式：Aggressive modularization keeps each feature isolated.
• No physical cross‑dependency：If one module needs data from anor,use EventBus or shared Pinia stores.
• Purge‑on‑remove：The base stays clean—just delete package from package.json and routes/menu vanish automatically.
• User Pain Point Highlighted：The dreaded “pull one file out and whole app crashes” scenario is eliminated.
• Damn fast hot reloads：Makes iterative development painless.
• Sized‑down bundles for production launch：No bloated initial chunks.

Now you can truly have a clean base plus plug‑in modules that you can add or remove at will. The system is inherently maintainable—no more spaghetti code in a single monolith.

从老版本到新版本：我到底升级了什么？

. 消除强耦合痛点： 旧版删除功能需要同时更新视图、路由和 store，一不留神就会导致白屏。\ n . 根除幽灵依赖： 每个功能只在其对应插件内引用必要依赖，让 Vite 的预建立更精准。\ n . 跨项目复用变成积木搭建： 新仓库可快速创建空基座并按需安装已有插件，无需复制粘贴整套代码。\ n . UI 层彻底解耦重构： 把 UI 组件抽离到 packages/ui，让后期更换组件库只需改此处即可。\ n \t\t\t\t\t\t\t \t\t \t \t \t \t \t \t \t          \r            \r\r\r\r\r\r\r\r\r\r\r\r\r\r\r\r\r\r" }