Anthony Fu: 现代前端生态的隐形架构师

当你在使用 VueUse、Vitest、UnoCSS、Slidev 这些工具时，你可能没有意识到它们都出自同一位开发者之手。

Anthony Fu —— 这位被称为 “现代前端生态隐形架构师” 的开源贡献者，正在用他的方式重塑整个 Web 开发体验。

一、从 Vue 核心到 Nuxt 核心

多重身份的核心贡献者

Anthony Fu 的开源身份版图覆盖了现代前端生态的每一个关键节点：

• ✅ Vue 核心团队成员
• ✅ Nuxt 核心团队成员
• ✅ Vite 核心团队成员
• ✅ Vitest 创建者 & 维护者
• ✅ Vercel & Nuxt 双职工程师

这种**“跨生态核心成员”**的身份让他拥有独特的视角 —— 他能看到框架之间的共通痛点，然后用统一的工具方案去解决。

开源影响力数据

• GitHub 粉丝：39.7k+
• 项目总星标：超过 160 万
• 赞助者：超过 150 位
• 参与组织：24+ 个开源组织

这些数字背后的真正意义是：全球有数十万开发者每天都在使用他写的代码。

二、他创造的工具帝国

让我们梳理一下 Anthony Fu 创造的那些改变游戏规则的项目。

1. VueUse —— Vue 生态的标准工具库

星标 22.3k+

VueUse 不是第一个 Vue 工具库，但它是第一个把 Composition API 的潜力发挥到极致的项目。

// 之前你需要自己写
const { x, y } = useMouse()
const isDark = useDark()
const clipboard = useClipboard()

// 现在一行搞定
import { useMouse, useDark, useClipboard } from '@vueuse/core'

影响力：现在几乎每个 Vue 项目都会引入 VueUse，它已经成为 Vue 生态的”标配”。

2. Vitest —— 测试体验革命

星标 16.8k+

“Vitest 让测试速度提升了 10-100 倍”

在 Vitest 出现之前，前端测试是这样的：

• Jest 启动慢、配置复杂
• 与 Vite 生态集成困难
• ESM 支持糟糕

Vitest 做对了什么：

• ✅ 原生基于 Vite，开发环境秒启动
• ✅ Jest 兼容 API，迁移成本低
• ✅ 内置 TypeScript / ESM 支持
• ✅ 极快的 HMR 测试体验

现状：Vitest 已经成为 Vue / Vite 生态的首选测试框架，并且正在向 React 等其他生态扩张。

3. UnoCSS —— 重新构想原子化 CSS

星标 18.9k+

UnoCSS 不是 Tailwind 的替代品，它是原子化 CSS 的下一代架构。

核心创新：

• 纯运行时 —— 无需预编译，按需生成
• 极速 —— 比 Tailwind JIT 快 5 倍
• 可扩展 —— 完整的预设系统
• 零配置 —— 开箱即用

4. Slidev —— 开发者的演示方式革命

星标 47.6k+

Slidev 彻底改变了开发者做技术分享的方式：

---
theme: seriph
---

# Slidev

用 Markdown 写幻灯片

<div class="pt-12">
  <span @click="next" class="px-2 p-1 rounded cursor-pointer hover:bg-white hover:bg-opacity-10">
    按空格继续 →
  </span>
</div>

你可以用熟悉的技术栈做演示：

• Markdown 写内容
• Vue 组件做交互
• UnoCSS 做样式
• CodeSurfer 做代码高亮
• 直接导出 PDF / PPTX

现在你看到的大多数技术大会演讲幻灯片，很可能就是用 Slidev 做的。

三、他解决的那些”没人愿意碰”的问题

优秀的开发者解决已知问题，伟大的开发者发现别人看不到的问题。

1. Vue 2 & 3 兼容难题 —— Vue Demi

当整个社区还在争论”Vue 2 还是 Vue 3”时，Anthony Fu 创造了 Vue Demi —— 一个让你的库同时兼容 Vue 2 和 3 的工具。

// 你的库代码不需要关心版本
import { ref, reactive, computed } from 'vue-demi'

影响：这个项目让整个 Vue 生态的迁移成本降低了一个数量级。无数组件库作者因此得以同时支持两个版本。

2. 构建工具碎片化 —— unplugin

前端有三大构建工具：Vite、Rollup、Webpack。每个都有自己的插件 API。

Anthony Fu 的答案是 unplugin —— 统一插件系统：

import { createUnplugin } from 'unplugin'

export default createUnplugin((options) => ({
  name: 'my-plugin',
  transform(code, id) {
    // 写一次，同时支持 Vite / Rollup / Webpack
  }
}))

3. 自动导入的标准化 —— unimport

“自动导入”听起来是个小功能，但 Anthony Fu 把它做成了跨框架的基础设施：

// 无需 import，直接用
const count = ref(0)
const doubled = computed(() => count * 2)

现在：

• Nuxt 的自动导入底层是 unimport
• Vue Macros 用的是 unimport
• VitePress 用的是 unimport
• 你的框架也可以用 unimport

四、开源哲学：工具驱动的开发者体验革命

核心理念：DX First

Anthony Fu 的所有项目都遵循同一个原则：

开发者体验 (Developer Experience) 优先

体现在三个层面：

1. 零配置原则

# 之前
npm install --save-dev jest babel-jest ts-jest @types/jest
# 然后写 50 行 jest.config.js

# 现在（Vitest）
npm install --save-dev vitest
# 零配置直接运行

2. 渐进式采用

“All in” 是 adoption 的敌人。Anthony Fu 的工具总是支持渐进式迁移：

• Vitest 兼容 Jest API，你可以一个测试文件一个测试文件地迁移
• UnoCSS 支持 Tailwind 兼容模式，你不需要重写所有 class
• VueUse 是函数级的，想用哪个函数就 import 哪个

3. 类型安全是底线

所有项目从第一天起就是 TypeScript First。类型不是”后来加上的”，而是设计的一部分。

工作流：工具驱动效率

Anthony Fu 不仅为别人造工具，他也为自己造工具：

• ni — 自动识别包管理器（npm/yarn/pnpm）
• taze — 智能依赖更新
• bumpp — 版本号提升与发布
• tsdown — TypeScript 库构建工具

好的开发者用好工具，伟大的开发者创造工具。

五、对现代 Web 开发的启示

启示 1：生态统一比框架创新更重要

我们不缺新框架，我们缺能把现有框架连接起来的胶水。

Anthony Fu 做的不是又一个新框架，而是：

• 让 Vue 2 和 3 更好地共存
• 让 Vite、Rollup、Webpack 共享插件
• 让 Nuxt、VitePress、Slidev 共享自动导入

生态统一带来的价值，远大于又一个新框架。

启示 2：小问题的极致解决产生网络效应

VueUse 不是什么”革命性架构突破”，它只是把 200 多个常用工具函数做好了。

但当 200 个小工具都做得足够好、足够易用时，就会产生网络效应：

• 人们用 VueUse 因为它工具全
• 人们贡献新工具因为 VueUse 用户多
• 生态越大，价值越高

启示 3：开源不是副业，是职业

Anthony Fu 的全职身份就是开源开发者。他通过 GitHub Sponsors 和公司赞助获得可持续的收入。

这告诉我们：

开源不是”业余爱好”，而是可以成为一个真正的职业 —— 只要你创造的价值足够大。

六、他的技术栈参考

如果你想学习 Anthony Fu 的最佳实践，这是他的技术栈：

核心技术

开发环境

• 编辑器：VS Code（正在试用 Cursor）
• 主题：Vitesse Theme
• 字体：Input Mono
• Shell：zsh
• 启动器：Raycast

结语：一个人的力量

Anthony Fu 的故事告诉我们：

一个优秀的开发者，确实可以改变整个生态。

他没有创建新的编程语言，也没有发明新的前端范式。他只是：

1. 发现别人忽略的痛点
2. 用优雅的方式解决
3. 持续迭代和维护
4. 构建社区和生态

当你下次使用 VueUse、Vitest 或者 Slidev 时，记得 —— 这些工具背后有一个人，在用他的方式让每个开发者的生活变得更好一点。

开源的真正魅力，不在于你创造了什么，而在于你帮助了多少人。

参考资源：

• Anthony Fu 的个人博客
• Anthony Fu 的 GitHub
• VueUse 文档
• Vitest 文档
• UnoCSS 文档