我做了个 Vue3 的中后台框架，想和你聊聊背后的故事

---

我做了个 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 分钟完成基础功能？

举个例子，产品说："做个用户管理页面，要有增删改查，要有权限控制。"

以前你可能需要：

1. 写表格组件（30分钟）
2. 写表单弹窗（30分钟）
3. 写搜索功能（20分钟）
4. 处理权限逻辑（20分钟）
5. 调整样式（你懂的，可能一下午）

现在呢？

<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。

项目地址： github.com/ChenyCHENYU...
在线演示： www.robotadmin.cn
文档地址： www.tzagileteam.com

如果觉得还不错，给个 Star 鼓励一下？

如果遇到问题，直接提 Issue，我看到都会回复。

如果有好的想法，欢迎 PR，一起让它变得更好。

---

最后的最后

谢谢你看到这里。

做开源不易，但能帮到别人的感觉真的很好。

希望 Robot Admin 能为你的开发工作带来一点点便利。

哪怕只是让你早下班一个小时，我觉得就值了。

记住：好的工具不仅要功能强大，更要让开发者用得愉快。

祝好。

CHENY

2025.07

---

啊哈哈大侠请留步，😎 下面是一些界面彩蛋：

---

先看看效果

看看 Robot Admin 长什么样：

🎨 登录页 - 第一印象很重要

简洁而不简单的登录页，后面会支持多种登录方式，动态背景让页面更有活力

🏠 首页 - 走心的一个选型告白

数据可视化面板，关键指标一目了然，支持自定义布局

📊 数据看板 - 让数据说话

ECharts 加持，各种图表类型应有尽有，支持实时数据更新

📝 表单设计 - 灵活且强大

8 种布局模式，动态表单配置，再复杂的表单也能轻松搞定

📋 数据表格 - 不只是展示

虚拟滚动、拖拽排序、行内编辑，10万条数据也能流畅操作

🔐 权限管理 - 安全第一

RBAC 权限模型，可视化权限配置，精确到按钮级别

✏️ 编辑器集成 - 满足各种需求

富文本、Markdown、代码编辑器，一应俱全

🎯 组件展示 - 30+ 实用组件

每个组件都精心设计，可以直接复制使用

🌙 深色模式 - 其实也挺精致

一键切换深色/浅色主题，夜间开发也舒适

🎪 更多功能演示

|---------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
| 日历组件 ~FullCalendar 集成，支持拖拽、事件管理~ | 审批流设计 _{可视化流程设计，傻瓜式操作} |
| Excel 导入导出 _{支持复杂表格，保留样式格式} | 3D 场景展示 ~3D 模型集成，让后台也能很酷~ |

等等...

---

看到这些截图，是不是心动了？

这些只是 Robot Admin 的冰山一角。更多功能等你来探索：

• 🎨 图标选择器 - 6000+ 图标随心选
• 🗺️ 地区联动 - 省市区街道四级联动
• 📊 进度展示 - 多种样式进度条
• ⏰ 时间组件 - 灵活的时间选择器
• 🔍 高级搜索 - 复杂条件一键搞定
• 📦 文件处理 - 上传、下载、压缩一应俱全
• 🎯 自定义指令 - 让代码更优雅
• ...还有更多

想要亲自体验？

🚀 在线演示： www.robotadmin.cn

📖 查看源码： github.com/ChenyCHENYU...

提示：在线演示支持手机访问，可以体验移动端适配效果哦～

---

这些截图都是实际项目截图，没有任何美化处理。What you see is what you get!

#Vue3 #中后台 #开源项目 #前端开发 #TypeScript #Bun #NaiveUI