Vue 3 的 Composition API 功能强大但学习曲线不低。 Claude Code 能生成地道的 Vue 3 代码—— 从单组件到完整页面，从状态管理到路由配置。
Claude Code 在 Vue 3 开发中的优势
优势：
生成符合 Vue 3 最佳实践的 Composition API 代码
自动补充 TypeScript 类型定义
理解 Pinia store 的设计模式
生成可复用的 Composables
根据功能描述生成完整组件框架
场景一：Composition API 组件
Prompt：
帮我写一个 Vue 3 + TypeScript 的用户列表组件：
- 从 /api/users 获取数据（分页）
- 支持搜索（输入 300ms 防抖后搜索）
- 支持删除用户（确认后调用 DELETE API）
- 加载中显示 skeleton，错误时显示重试按钮
- 使用 Composition API + script setup 语法
生成示例（关键部分）：
vue
<script setup lang="ts">
interface User { id: number; name: string; email: string }
const searchQuery = ref('')
const page = ref(1)
const { data: users, isLoading, error, refetch } = useUsers({
search: debouncedRef(searchQuery, 300),
page
})
async function deleteUser(id: number) {
if (!confirm('确认删除？')) return
await userApi.delete(id)
refetch()
}
</script>场景二：Pinia Store 生成
帮我设计一个购物车的 Pinia store：
- 添加/删除/更新商品数量
- 计算总价（商品价格 × 数量，支持优惠券折扣）
- 持久化到 localStorage
- TypeScript 类型完整
Claude Code 生成的 Store：
typescript
// stores/cart.ts
import { defineStore } from 'pinia'
interface CartItem {
id: number; name: string; price: number; quantity: number
}
export const useCartStore = defineStore('cart', () => {
const items = ref<CartItem[]>([])
const couponDiscount = ref(0)
const totalPrice = computed(() =>
items.value.reduce((sum, item) =>
sum + item.price * item.quantity, 0
) * (1 - couponDiscount.value)
)
function addItem(product: Omit<CartItem, 'quantity'>) {
const existing = items.value.find(i => i.id === product.id)
if (existing) { existing.quantity++; return }
items.value.push({ ...product, quantity: 1 })
}
return { items, totalPrice, couponDiscount, addItem }
}, { persist: { storage: localStorage } })场景三：可复用 Composable
把分页、搜索、排序的逻辑抽象成通用的 useTableData Composable，
任何列表页面都能用。接收 fetchFn 参数，
返回数据、加载状态和分页控制。
场景四：TypeScript Props 类型生成
把这个 JavaScript 组件转换为完整 TypeScript 版本，
包括 Props/Emits/Slots 的类型定义：
[粘贴 .vue 文件]
场景五：Vitest 单元测试
给这个 UserCard 组件写完整的单元测试：
- 测试 Props 渲染是否正确
- 测试点击删除按钮是否触发 emit
- 测试 loading 状态下的 UI
使用 Vitest + Vue Test Utils + @testing-library/vue
场景六：性能优化
这个列表组件在数据量大（1000+ 条）时很卡，
用虚拟滚动重构它（vue-virtual-scroller），
同时优化不必要的重渲染（v-memo/shallowRef）。
常用 Prompt 模板
[Options API 迁移]
把这个 Options API 组件迁移为 Composition API，
保持功能完全一致，用 script setup 语法：
[粘贴组件]
[响应式丢失排查]
这段代码的响应式为什么失效了？
[粘贴相关代码]
[组件间通信]
父组件需要调用子组件的方法，
用 defineExpose 实现，加 TypeScript 类型：
[描述需求]
来源：Anthropic Claude Code 官方文档 - docs.anthropic.com/en/docs/claude-code