案例1 · 用 Cursor 从 0 搭一个带搜索的待办 Vue 组件

本节目标

• 完整走一遍"Vibe 搭 Vue 组件"的真实流程
• 得到一个可运行、带搜索过滤的待办组件
• 学会用三件事验证它真的可用

目标：一个 TodoList.vue，支持增删、完成态切换、按关键字搜索过滤。

给 Cursor 的 Prompt（铁律版）：

用 Vue3 <script setup> + TypeScript 写 TodoList.vue：
- props 无，内部维护 todos: {id,text,done}[]
- 功能：添加（回车）、删除、切换完成态、顶部搜索框按 text 过滤
- 样式用 scoped CSS，简洁即可
- 输出完整单文件组件；并说明在父组件如何引用、npm run dev 后怎么验证三件事：
  (1) 回车能加 (2) 勾选变 done (3) 搜索能过滤

关键产物（节选）：

<script setup lang="ts">
import { ref, computed } from 'vue'
interface Todo { id: number; text: string; done: boolean }
const todos = ref<Todo[]>([])
const keyword = ref('')
const filtered = computed(() =>
  todos.value.filter(t => t.text.includes(keyword.value))
)
const add = () => {
  if (!keyword.value.trim()) return
  todos.value.push({ id: Date.now(), text: keyword.value, done: false })
  keyword.value = ''
}
const remove = (id: number) => { todos.value = todos.value.filter(t => t.id !== id) }
const toggle = (id: number) => {
  const t = todos.value.find(t => t.id === id); if (t) t.done = !t.done
}
</script>

运行方式：保存为 TodoList.vue，在任意 Vue3 项目里 import TodoList from './TodoList.vue' 使用，npm run dev 启动后用浏览器打开验证上述三件事。

名词解释

• 单文件组件（SFC, .vue）：Vue 把模板/脚本/样式封装在一个 .vue 文件里。Vibe 生成组件时通常直接产出完整 SFC，方便你整文件落地。
• computed（计算属性）：依赖变化时自动重算的派生值。filtered 随 todos/keyword 自动更新，是搜索过滤的天然载体。
• 验证三件事：把"能用"拆成 3 个具体可观测行为（加/改/查），逐一手动确认，比"看起来没问题"可靠。

课后练习

1. 为什么搜索过滤用 computed 而不是在 add 时手动维护一个过滤数组？
   • 答案：computed 让过滤与源数据自动同步，任何增删改都会即时反映，避免手动维护两份数据的不一致。
2. 验证"组件可用"时，为什么强调"三件具体行为"而不是"能跑起来"？
   • 答案：能跑只说明无报错；三件具体行为是功能正确性证据，能暴露"能渲染但交互失效"的隐性 bug。

总结

这个案例把前面所有方法论落到了一个真实产物上。你会发现 Vibe Coding 搭 UI 组件特别顺：你描述"要什么功能 + 约束（TS/scoped/单文件） + 怎么验证"，模型给出的 SFC 通常就能直接用。但案例真正的教学重点在最后一步——"用三件事验证"。太多人拿到 AI 给的组件，看它渲染出来就以为完了，结果交互逻辑是坏的。我坚持要求"回车能加、勾选能改、搜索能滤"三件具体行为逐一确认，因为这是把"AI 的猜测"变成"我确认的事实"的必经之路。Vibe Coding 产出的组件不是圣旨，是待验收的草稿；你省下的是写代码的时间，多花的是用具体行为验证的时间——这笔账怎么算都值。