🎉 继 tabtab-admin 后，我们带来了全新升级版本 —— TabTab UI，采用下一代 JavaScript 工具链 Vite Plus，性能提升显著！
🖥️ 在线演示
👀 想第一时间体验？点击这里 → Live Demo: https://ui.tabtab.dev
📌 写在前面
还记得我之前写的 🚀 TabTab Admin：一款现代化的 Vue 3 后台管理系统模板 吗？当时收获了很多小伙伴的支持和建议 🙌
时隔一段时间，我对项目进行了全面升级：
- 🔄 构建工具：从 Vite 升级到 Vite Plus (Rolldown)
- 🏗️ 架构升级：从单体应用升级为 Monorepo
- 🎨 样式方案：升级到 Tailwind CSS v4
- 🎯 组件库：引入 shadcn-vue + Reka UI
性能提升了将近一倍！ 下面来详细聊聊这次升级的核心亮点。
⚡ Vite Plus：下一代 JavaScript 工具链
提到 Vite Plus，可能还有小伙伴不太熟悉，但你一定听过它的核心 —— Rolldown！
🎯 Rolldown 是什么？
Rolldown 是由 VoidZero（尤雨溪创办）打造的基于 Rust 的下一代打包器，完全兼容 Rollup API，性能比 esbuild 还快 2 倍以上！
官方宣称：Rolldown 将成为 Vite 的默认打包器，2026 年正式发布 1.0
🚀 实际体验对比
| 场景 | Vite (传统) | Vite Plus (Rolldown) | 提升 |
|---|---|---|---|
| 冷启动 | 2-3 秒 | < 1 秒 | 🚀 2-3x |
| HMR | 50-100ms | < 50ms | ⚡ 2x |
| 生产构建 | 1-2 分钟 | 30-60 秒 | 🔥 2x |
数据基于真实项目测试，实际提升因项目规模而异
🛠️ Vite Plus 带来的变革
- 一体化工具链 —— 整合 Vite、Vitest、Oxlint、Oxfmt、Rolldown、Vite Task 于一体
- 统一 CLI ——
vp dev、vp build、vp test、vp check、vp fmt - 任务缓存 —— Monorepo 任务缓存和依赖感知调度，团队开发效率倍增
- 零配置体验 —— 开箱即用，所有配置集中在
vite.config.ts
# 启动开发服务器
pnpm dev
# 构建生产版本
pnpm build
# 类型检查
pnpm check
# 代码规范
pnpm lint
pnpm fmt
🎨 项目展示：5 种布局模式实时切换
这次升级保留了经典的 5 种布局模式，并进行了 UI 优化：
| 布局 | 说明 | 适用场景 |
|---|---|---|
| Sidebar | 经典侧边栏 | 菜单较多的后台系统 |
| Double Sidebar | 双栏侧边栏 | 菜单层级较深的系统 |
| Top Nav | 顶部导航 | 菜单较少的轻量级系统 |
| Mixed | 混合布局 | 顶部一级导航 + 侧边栏二级导航 |
| Mixed Double | 混合双栏 | 顶部导航 + 双栏二级/三级导航 |
混合双栏布局 (Mixed Double)
|
侧边栏布局 (Sidebar) |
顶部导航布局 (Top Nav) |
|
双侧边栏布局 (Double Sidebar) |
混合布局 (Mixed) |
📌 悄悄说一句：布局可以实时切换，刷新页面依然保持，无需刷新！
🏗️ Monorepo 架构：模块化管理
升级为 Monorepo 后，项目结构更加清晰：
ui/
├── apps/ # 应用目录
│ ├── admin/ # 后台管理系统
│ └── playground/ # 组件演示
├── packages/ # 共享包
│ ├── ui/ # UI 组件库 (@tabtab/ui)
│ ├── styles/ # 样式包 (@tabtab/styles)
│ └── typescript-config/ # TS 配置
└── internal/ # 内部工具
├── node-utils/ # Node 工具
└── vite-config/ # Vite 配置
📦 可复用的包
- @tabtab/ui —— 布局组件和基础 UI 组件
- @tabtab/styles —— 全局样式和 CSS 变量
🛠️ 技术栈一览
| 类别 | 技术 |
|---|---|
| 核心框架 | Vue 3.5 + TypeScript 5.7 |
| 构建工具 | Vite Plus (Rolldown) |
| 样式方案 | Tailwind CSS v4 |
| UI 组件 | shadcn-vue + Reka UI |
| 状态管理 | Pinia + 持久化 |
| 路由 | Vue Router 4 |
| 国际化 | Vue I18n |
| 工具库 | VueUse |
| 包管理 | pnpm Workspaces |
🌟 核心功能特性
布局系统
- ✅ 5 种布局模式实时切换
- ✅ 可折叠响应式侧边栏
- ✅ 多标签页管理（支持缓存）
- ✅ 全局页面搜索
主题系统
- ✅ 明暗主题切换
- ✅ 布局宽度、标签栏固定等详细配置
- ✅ CSS 变量驱动的灵活主题
其他
- ✅ 中英文国际化
- ✅ 响应式设计（适配移动端）
- ✅ Toast 通知系统
💻 快速开始
环境要求
- Node.js >= 20.0.0
- pnpm >= 10.32.0
安装依赖
pnpm install
启动开发
# 启动所有应用
pnpm dev
# 单独启动 Admin
pnpm dev:admin
# 单独启动 Playground
pnpm dev:playground
🎁 写在最后
这次升级不仅仅是技术栈的更新，更是开发体验的全面提升。Vite Plus 的出现，标志着 JavaScript 工具链进入了一个新的时代。
"工欲善其事，必先利其器" —— 选择好的工具，让开发更高效！
如果你对这个项目感兴趣，欢迎：
- 🖥️ 在线体验：ui.tabtab.dev
- ⭐ GitHub 点个 Star：TabTab UI
- 📖 查看在线文档
- 💬 提 Issue 交流
有问题随时评论区见，我会第一时间回复！
