我做了個 Vue3 的中後台框架，想和你聊聊背後的故事
不是技術博客，只是一個前端開發者的自白
開篇
你好，我是 CHENY。一個有點代碼潔癖的前端開發者。
今天想和你聊聊我最近做的一個開源項目 —— Robot Admin。不聊技術有多牛，不聊架構有多先進，就想和你説説，為什麼要做這個項目，以及它能幫你解決什麼問題。
為什麼又是一個後台框架？
是的，我知道。GitHub 上的後台框架已經夠多了。
但團隊每次接手新項目時，我還是會犯愁。用 vue-element-admin？功能是全，但好多東西用不上，而且技術棧有點老了。用 Ant Design Pro？是 React 的，團隊都是 Vue 技術棧。當然還有很多社區其他非常優秀的開源項目如 Vben，Geeker，Soybean 等等，都是精品後台，作者也很棒，項目很火，太多了不一一贅述，和平和尊敬。但因顆粒度掌控度和團隊個性契合度都不是那麼融合，最後擔心團隊變成了各種 CV 大法，使用不精細，無法卡控能效，無法提升技術變現的業務專注度，以及部分成員的心智負擔問題等，就擼一個吧，並不是非要重複造輪子。
包括早期搭建的一套框架也垂垂老矣不甚滿意，基於對 vite 和 bun 的喜愛，乾脆重新搞一個？時間啊...
更讓人頭疼的是，每個項目都在重複同樣的工作：
- 配置路由、配置權限、寫登錄頁
- 封裝 axios、處理 token、寫攔截器
- 找圖表庫、找編輯器、找各種組件
- 調試打包配置、優化首屏加載
- 啊大海啊，你全是水，你的沉澱在哪裏，團隊沉澱在哪裏...
我想，是不是可以花點時間，結合精益化的管理訴求，期望逐步能效賦能的角度上，做一個框架，搭一個引子，把這些重複的工作都做好，讓大家可以專注於業務開發？
Robot Admin 是什麼？
簡單來説，它是一個基於 Vue 3.5 + TypeScript + Naive UI 的中後台解決方案。
但我更願意把它描述為：一個讓你可以在 30 秒內啓動項目，10 分鐘內完成基礎功能的開發工具。
技術選型：每一個選擇都有理由
讓我展開説説為什麼選擇這些技術棧：
核心框架層：
- Vue 3.5.13 - 不是 3.0，不是 3.2，是最新的 3.5。每個小版本都有性能提升
- TypeScript 5.8 - 類型體操？不，是為了寫代碼時的智能提示，為了重構時的信心
- Naive UI 2.41 - 看過它的 Select 組件嗎？那個虛擬列表，1萬條數據照樣絲滑
- UnoCSS 66.0 - 原子化 CSS，打包後只有用到的樣式，體積極小
構建工具層：
- Vite 6.2.1 - 不是 webpack，因為我們要的是毫秒級熱更新
- Bun 1.x - npm install 要 45 秒？Bun 只要 2 秒，不是吹的
狀態管理層：
- Pinia 3.0.1 - Vuex 的官方繼任者，API 更簡潔，TypeScript 支持更好
- Vue Router 4.5 - 配合權限系統，實現真正的動態路由
- VueUse 13.1 - 63 個組合式函數，不用重複造輪子
可視化層：
- ECharts 5.6 - 國產之光，功能強大，文檔友好
- AntV X6 2.18 - 流程圖引擎，我們用它做工作流設計器
30 秒啓動是怎麼做到的？
# 傳統方式
npm install # 喝杯咖啡，刷會兒抖音...（45.6秒）
npm run dev # 繼續等...（還要10秒）
# Robot Admin (使用 Bun)
bun install # 2.3 秒搞定！
bun dev # 瞬間啓動（不到1秒）
這不是理論數據，是我在 16GB 內存的普通筆記本上測試的真實結果。
10 分鐘完成基礎功能？
舉個例子，產品説："做個用户管理頁面，要有增刪改查，要有權限控制。"
以前你可能需要：
- 寫表格組件（30分鐘）
- 寫表單彈窗（30分鐘）
- 寫搜索功能（20分鐘）
- 處理權限邏輯（20分鐘）
- 調整樣式（你懂的，可能一下午）
現在呢？
<template>
<div>
<!-- 搜索區域 -->
<c-search v-model="searchParams" :schema="searchSchema" />
<!-- 數據表格 -->
<c-table
:columns="columns"
:data="tableData"
:loading="loading"
@add="handleAdd"
@edit="handleEdit"
@delete="handleDelete"
/>
<!-- 表單彈窗 -->
<c-form-modal
v-model:visible="formVisible"
:schema="formSchema"
:data="currentRow"
@submit="handleSubmit"
/>
</div>
</template>
<script setup>
// 10 分鐘，真的夠了
// 因為增刪改查的邏輯，我們都封裝好了
const { tableData, loading, refresh } = useTable(api.getUserList)
const { formVisible, currentRow, handleSubmit } = useForm(api.saveUser, refresh)
</script>
那些用心的細節
1. 不僅僅是組件，更是解決方案
我們提供了 30+ 個演示頁面，每一個都是從實際項目中提煉出來的：
- 圖標組件 - 不只是展示圖標，還包括圖標選擇器、動態加載、自定義圖標
- 地區聯動 - 省市區三級聯動，數據實時更新，支持回顯，還有街道數據
- 表單佈局 - 8 種佈局模式，響應式自適應，支持動態表單
- 富文本編輯器 - 集成了圖片上傳、視頻插入、表格編輯、自定義工具欄
- 權限管理 - RBAC 模型，精確到按鈕級別，支持數據權限
每個 demo 都可以直接複製到你的項目中使用。代碼都在那裏，沒有魔法。
2. 那些提升幸福感的自定義指令
<!-- 再也不用手寫防抖了 -->
<input v-model="keyword" v-debounce:300="search" />
<!-- 一鍵實現複製功能 -->
<button v-copy="text">複製</button>
<!-- 優雅的權限控制 -->
<button v-permission="['admin', 'editor']">刪除</button>
<!-- 防止機密信息截圖 -->
<div v-watermark="'機密文件'">
重要內容
</div>
<!-- 還有拖拽、長按、節流 -->
<div v-draggable="handleDrag">拖我</div>
<button v-longpress="showMenu">長按顯示菜單</button>
<button v-throttle:1000="submit">提交（1秒內只能點一次）</button>
這些看起來很簡單對吧？但就是這些小細節，能讓你的開發效率提升一大截。
3. 美觀，真的很重要
我選擇了 Naive UI，不僅因為它性能好，更因為它真的很好看。
你看過 Naive UI 的按鈕動效嗎？那個微妙的波紋效果，那個恰到好處的陰影變化... 這些細節會讓你的產品看起來很高級。
配合 UnoCSS 的原子化樣式：
<div class="flex items-center gap-4 p-6 rounded-xl shadow-lg hover:shadow-xl transition-all">
<!-- 幾個類名，搞定一個漂亮的卡片 -->
</div>
而且 UnoCSS 有完整的 VS Code 插件支持，輸入類名時有智能提示，再也不用記那些類名了。
性能？當然在乎
我們做了很多優化：
- 首屏加載 < 800ms（gzip 後不到 200KB）
- 熱更新 < 100ms（真的是毫秒級）
- 打包體積 < 2MB（包含所有依賴）
- 虛擬列表 - 10萬條數據照樣流暢滾動
但説實話，作為開發者，我更在乎的是開發時的體驗。那種改完代碼立刻看到效果的感覺，那種不用等待編譯的流暢感，這才是我追求的。
具體的優化措施
// 1. 路由懶加載 + 預加載
{
path: '/dashboard',
component: () => import('./views/dashboard/index.vue'),
meta: { preload: true } // 鼠標懸停時預加載
}
// 2. 組件按需引入（自動的）
// 不需要手動 import，unplugin-vue-components 會自動處理
// 3. 圖片懶加載
<img v-lazy="imageSrc" />
// 4. 虛擬滾動
<c-virtual-table :data="largeDataset" :height="600" />
關於權限，我們是認真的
很多項目的權限都是做做樣子，Robot Admin 的權限是真的可以用到生產環境：
// 路由權限 - 自動過濾無權限路由
const routes = await permissionStore.generateRoutes()
// 菜單權限 - 動態生成菜單
const menus = computed(() => permissionStore.menus)
// 按鈕權限 - 精確控制
<button v-if="hasPermission('user:create')">新建</button>
// API權限 - 請求自動校驗
api.createUser() // 自動檢查權限，無權限直接攔截
// 數據權限 - 行級數據過濾
const tableData = computed(() => {
return data.filter(item => hasDataPermission(item))
})
最重要的是，這些都是配置化的，不需要你寫一堆 if-else。
完整的生態支持
看看我們集成了多少優秀的工具：
開發工具鏈：
- ESLint 9.21 + Prettier 3.5 - 代碼規範自動化
- Husky 7.0 + Commitizen - Git 提交規範化
- Vitest 3.0 - 單元測試，速度比 Jest 快 10 倍
- TypeScript 5.8 - 完整的類型支持
業務組件庫：
- WangEditor 4.7 - 輕量級富文本編輯器
- @kangc/v-md-editor 2.3 - Markdown 編輯器
- Driver.js 1.3 - 新手引導
- vue-draggable-plus 0.6 - 拖拽排序
- @fullcalendar/vue3 6.1 - 完整的日曆組件
- xlsx 0.18 - Excel 導入導出
可視化方案：
- ECharts 5.6 - 數據可視化
- @antv/x6 2.18 - 流程圖
- @vue-flow/core 1.45 - 流程編輯器
- @splinetool/runtime 1.9 - 3D 場景
一些真實的使用場景
場景1：緊急項目，明天要演示
# 10分鐘搭建起來
git clone https://github.com/ChenyCHENYU/Robot_Admin.git
cd robot_admin
bun install && bun dev
# 改個 LOGO，調整下主題色
# 把演示數據換成真實數據
# 搞定，可以演示了
場景2：從老項目遷移
我們保持了很多熟悉的 API 設計：
// 如果你用過 element-admin，這些代碼看起來會很熟悉
this.$router.push('/dashboard')
this.$message.success('操作成功')
this.$confirm('確定刪除嗎？')
// 但底層都用最新的技術重寫了
// 比如 $message 其實是：
const message = useMessage() // 組合式 API
場景3：團隊協作開發
// 完整的 TypeScript 支持
interface User {
id: number
name: string
role: Role
department: Department
permissions: Permission[]
}
// 寫代碼時有完整的類型提示
const user: User = await api.getUser(id)
user.name // <- 這裏會有自動補全
user.permissions // <- 知道這是 Permission 數組
場景4：複雜的業務需求
比如一個工作流設計器：
<template>
<c-flow-designer
v-model="flowData"
:nodes="nodeTypes"
:validators="validators"
@save="handleSave"
/>
</template>
<script setup>
// 是的，一個組件搞定
// 支持拖拽、連線、驗證、導出
</script>
項目架構：清晰且可擴展
Robot_Admin/
├── src/
│ ├── api/ # 接口層，統一管理
│ ├── components/ # 組件庫
│ │ ├── global/ # 全局組件（30+ 核心組件）
│ │ └── local/ # 頁面級組件
│ ├── views/ # 頁面視圖
│ │ ├── dashboard/ # 數據看板
│ │ ├── demo/ # 30+ 演示頁面
│ │ └── sys-manage/ # 系統管理
│ ├── stores/ # Pinia 狀態管理
│ ├── composables/ # 組合式函數
│ ├── hooks/ # 自定義 Hooks
│ ├── directives/ # 自定義指令（7個）
│ ├── router/ # 路由配置
│ ├── utils/ # 工具函數
│ └── types/ # TypeScript 類型
每個目錄都有明確的職責，新人上手也能快速理解項目結構。
未來的計劃
Robot Admin 還在成長，我有一些計劃：
近期（已在進行）：
- 完善文檔站點 - 每個組件都有詳細的 API 文檔
- 增加更多業務組件 - 地圖組件、視頻播放器、PDF 預覽
- 優化移動端體驗 - 響應式優化，手勢支持
中期規劃：
- 支持微前端架構 - 可以接入老項目
- 插件化系統 - 按需加載功能模塊
- 可視化頁面搭建 - 拖拽生成頁面
長期願景：
- 全棧解決方案（集成 NestJS）
- 跨端支持（Electron 桌面應用）
- AI 輔助開發 - 自然語言生成代碼
架構演進路線：
- 當前：Monomer（單體應用）
- 接下來：Monorepo（單倉多包）
- 計劃中：MicroApp（微前端）
- 最終：NestJS（全棧方案）
但這些都不是最重要的。最重要的是，我希望 Robot Admin 能真正幫到你，讓你可以：
- 少加班，多陪家人
- 少寫重複代碼，多做有創造性的工作
- 讓開發變成一件愉快的事
- 有那麼一點點代碼潔癖，對編寫的代碼有掌控欲
寫在最後
我是 CHENY，一個普通的前端開發者，也是一個有點理想主義的人。
做這個項目的初衷很簡單：讓厭倦了重複工作的團隊和夥伴，想要更好的開發體驗，花更多的時間在業務場景和技術精度上。我相信還有很多人和我一樣。
Robot Admin 不是完美的，它還有很多需要改進的地方。但我會持續維護它，因為我自己的項目也在用它，我們團隊的項目也在用它。
目前的數據：
- GitHub Stars：9+（雖然不多，但每一個都很珍貴）
- Forks：11+（有人 fork 説明真的有用）
- 技術棧：50+ 精選依賴，每一個都經過考量
如果你：
- 正在尋找一個現代化的 Vue3 中後台方案
- 希望有更好的開發體驗
- 不想重複造輪子
- 認同我的理念
- 也有一點代碼潔癖
那麼，不妨試試 Robot Admin。
項目地址： https://github.com/ChenyCHENYU/Robot_Admin\
在線演示： https://www.robotadmin.cn\
文檔地址： https://www.tzagileteam.com
如果覺得還不錯，給個 Star 鼓勵一下？
如果遇到問題，直接提 Issue，我看到都會回覆。
如果有好的想法，歡迎 PR，一起讓它變得更好。
最後的最後
謝謝你看到這裏。
做開源不易，但能幫到別人的感覺真的很好。
希望 Robot Admin 能為你的開發工作帶來一點點便利。
哪怕只是讓你早下班一個小時，我覺得就值了。
記住：好的工具不僅要功能強大，更要讓開發者用得愉快。
祝好。
CHENY\
2025.07
#Vue3 #中後台 #開源項目 #前端開發 #TypeScript #Bun #NaiveUI
