基于 vue-vben-admin v5.6.0 收敛而成的 Element Plus 管理后台独立仓库。
原先 monorepo 中的多应用、多包已拍平进本仓库的 src/,业务组件统一使用 Element Plus,并保留 Vben 布局壳(侧栏、顶栏、多标签、表单骨架等)。本仓是 多仓库(polyrepo) 体系里的一个产品仓,不再挂在官方大仓 workspace 下。
官方 vue-vben-admin 是典型的 pnpm workspace(monorepo):多个 apps(antd / ele / naive / tdesign 等)+ 大量 packages + docs / playground。对「只交付一个 Element Plus 管理端」的团队来说,成本偏高;更合适的做法是拆成 多仓库:每个可交付产品独占一个仓库。
| 痛点(monorepo) | 多仓库后的收益 |
|---|---|
| 多 UI 变体并存,依赖与适配层重复 | 本仓只保留 Element Plus,去掉 antd 等变体 |
| 包边界多,改一处常要跨包跳转 | 代码拍平进本仓 src/,路径清晰、调试直接 |
| CI / Docker / docs / 测试站与业务交付耦合 | 按产品仓按需裁剪,互不影响 |
| 新人要先理解整个 workspace 图谱 | 本仓一个 package.json,pnpm install / pnpm dev 即可跑 |
| 发布、权限、版本与框架仓绑在一起 | 产品仓独立发版、独立权限,框架升级可择机同步 |
结论: monorepo 适合上游框架维护与多皮肤演示;业务侧采用 多仓库,把可交付后台拆成独立仓(如本 v-admin),边界更清晰、更好维护。
功能与结构基线固定在官方 tag v5.6.0,而不是盲目跟 main / 更新大版本。
主要原因:
-
稳定性优先
5.6.0 之后的官方迭代里,部分能力变更快、回归问题相对多。对本仓库而言,「能稳定跑业务」比「永远追最新」更重要。 -
迁移边界清晰
以确定的 tag 做拍平与改造,避免迁移中途被上游 breaking change 打断,方便对照官方源码排查差异。 -
版本策略可预期
- 壳层与业务能力:以 5.6.0 为结构参考,可在兼容前提下酌情用更新依赖。
- 本仓库已有的工具链(如较新的 Vite / Vue / TS / ESLint):不回退。
- Tailwind 相关:单独钉死为 5.6.0 同款(见下节)。
结论: 选 5.6.0 是「可控基线 + 少踩坑」,不是拒绝升级;若上游稳定后再评估大版本跟进。
本仓库当前使用 Tailwind CSS 3.4.x(与 vue-vben-admin@v5.6.0 一致),刻意不跟官方后续的 Tailwind v4 方案。
原因:
-
浏览器兼容性
Tailwind v4 对构建链路与目标环境要求更高;v3 对现网常见浏览器、存量 CSS 工具链更稳妥。管理后台往往要覆盖内部系统较旧的浏览器环境,3.x 更合适。 -
与 Vben 5.6.0 壳层一致
布局、主题变量、@iconify/tailwind、tailwind-merge等在 5.6.0 上按 v3 PostCSS 插件模式 验证过。直接升 v4 意味着改配置、改语法、重验整套样式,收益有限、风险大。 -
降低迁移噪音
monorepo → 多仓库 / 拍平本身已有大量结构改造;样式引擎再换大版本会叠加问题,不利于定位「是结构迁移问题还是 Tailwind 升级问题」。
结论: Tailwind 3.x = 兼容优先、与 5.6.0 壳层对齐;非性能瓶颈时不主动升 v4。
- 框架: Vue 3 + Vite + TypeScript + Pinia + Vue Router
- 业务 UI: Element Plus
- 壳层 UI: Vben 原
@vben-core能力(已拍平进src/vben-core、src/vben等) - 样式: Tailwind CSS 3.x
- 表格: vxe-table
- 本地 Mock:
backend-mock/(独立小服务,非 workspace 多包)
# 安装依赖(在 v-admin 目录)
pnpm install
# 启动 Mock 接口(可选,默认端口见 backend-mock)
pnpm dev:mock
# 启动前端
pnpm dev生产构建:
pnpm buildsrc/adapter/— Element Plus / 表单 / vxe-table 适配src/views/— 业务页与示例src/vben/、src/vben-core/— 原 Vben 壳与核心能力(拍平后)src/locales/— 应用级国际化文案backend-mock/— 本地 Mock API
本仓库是 多仓库体系下的独立产品仓,不是官方 monorepo 的完整镜像。若需多 UI 变体、文档站、完整 CI 矩阵,请直接使用上游 vue-vben-admin。