第四部分 · 变成前端应用

上一部分你有了一个好看的静态页面，但它是个「样板间」——按钮点了没反应，任务是写死的假数据。这一部分我们请出 Vue，把这个页面变活：能真正添加任务、删除任务、标记完成。全程还是纯前端，数据先只存在浏览器里。至于「刷新一下数据就没了」这个坑——我们留到最后一章点破，它正是下一部分的引子。

16. Vue 是什么

这一章要解决什么问题

在动手之前，先花几分钟弄明白：我们为什么要换个方式做页面？Vue 到底帮我们解决了什么？搞懂这一层，后面几章你就知道自己在做什么，而不是照着敲。

这是什么

Vue（读作 /vju:/，就是英文单词 view 的发音）是一个前端框架。你可以把它理解成：一套让「页面」和「数据」自动挂钩的机制。

打个比方。静态页面像一张打印出来的纸——上面写着「买菜、写周报」，你想改，得重新排版、重新打印一张。而 Vue 页面像一块电子屏：屏幕连着一份数据清单，你往清单里加一条，屏幕上自动就多一行；你划掉清单里的一条，屏幕上自动就少一行。

你只管改数据，画面自己跟着变。这就是 Vue 最核心、也几乎是你现在唯一需要记住的能力。

为什么现在需要它

回想上一部分的痛点：任务是写死在页面里的。如果不用 Vue，你想「添加一条任务」，就得手动写代码去操作页面结构、往列表里塞一个新格子——又碎又容易出错。

有了 Vue，这件事变成：往数据清单里加一条，页面自己更新。 你的注意力从「怎么操作页面」变成「数据应该长什么样」，这正是初学者更容易想清楚的层面。

💡 你不需要懂 Vue 内部怎么实现这套「自动更新」的魔法，就像你不需要懂电子屏的电路。你只需要记住结论：改数据，画面自动变。 剩下的实现细节，交给 AI。

在 AI Todo 项目里怎么用

我们的 Todo 天生就是「一份任务清单 + 一个显示它的页面」，简直是为 Vue 量身定做的：

• 一份数据：所有任务组成的列表。
• 一个页面：把这份列表显示出来，并提供输入框、按钮去改它。

接下来几章，添加、删除、完成，本质上都是同一件事——改那份数据清单，然后看页面有没有跟着正确地变。

本章小结

Vue 就是让「数据」和「页面」自动挂钩的机制：你改数据，页面自动变。对我们的 Todo 来说，任务列表是数据，页面负责显示它。记住这一条，就能往下走了。

17. 让 AI 把页面改成 Vue 应用

这一章要解决什么问题

道理懂了，该动手了。这一章我们让 AI 把上一部分那个单个 HTML 文件，改造成一个正经的 Vue 项目。注意：这一步我们只搬家，不装修——页面看起来要和之前几乎一样，但底子已经换成 Vue 驱动了。

这是什么

「Vue 项目」和之前的「单个 HTML 文件」不太一样。它需要一个小工具来创建和运行，这个工具叫 Vite（读作 /vi:t/，法语「快」的意思）。你不用理解它，只要知道两件事：

• 用 Vite 创建一个 Vue 项目（AI 会帮你敲命令）。
• 之后用 npm run dev 启动它，然后在浏览器访问一个 http://localhost:xxxx 的地址看结果。

💡 别被「项目」「命令」这些词吓到。你在第二部分已经跑通过「AI 建项目 → 命令启动 → 浏览器看结果」这个循环了。这一章只是同一个循环，换了个更专业的壳。

让 Claude Code / Codex 执行的小任务

在你的 ai-todo 项目里启动 AI，把下面这段任务提示词发给它：

任务目标：
把我现在这个单个 HTML 文件的 Todo 页面，改造成一个用 Vue 3 的前端项目。

当前状态：
我现在只有一个静态 HTML 页面，有标题、输入框、添加按钮和几条写死的示例任务，
点按钮没有任何功能。我完全没有代码基础。

限制条件：
这次只做「搬家」：用 Vite 创建一个 Vue 3 项目，把现在页面的外观原样搬过去。
先不要新增任何功能（添加、删除、完成都下一步再做），不要接后端，不要加数据库。

期望结果：
1. 你告诉我用什么命令启动这个项目（我预期是 npm run dev 之类）。
2. 启动后，我在浏览器打开你给我的 localhost 地址，
   看到的页面和之前那个静态页面外观基本一致。

验收标准：
1. 项目能用一条命令启动，你要明确告诉我这条命令。
2. 浏览器打开后，标题、输入框、添加按钮、示例任务列表都还在，长得和之前差不多。
3. 启动和打开过程中没有报错。

运行后应该看到什么结果

• AI 会敲一串命令，帮你把项目创建好、把依赖装好。
• 它会告诉你运行 npm run dev（或类似命令）来启动。
• 你启动后，终端里会打印出一个地址，通常是 http://localhost:5173。
• 在浏览器打开这个地址，你看到的页面和上一部分几乎一模一样。

如何验收结果是否正确

这一章的验收有个特别之处：「看起来没变化」恰恰是对的。

• AI 给了我一条明确的启动命令了吗？
• 运行后终端给出了一个 localhost 地址吗？
• 浏览器打开后，标题、输入框、按钮、示例任务都还在、布局没乱吗？
• 启动过程没有红色报错吗？

四条都打勾，说明「搬家」成功——底层已经是 Vue 了，只是你还没让它露一手。

如果结果不对，怎么反馈给 AI

如果启动报错，把终端里那段红色文字原样复制给 AI：

我运行了你给我的启动命令，但终端报了下面这段错误（原文粘贴）：
<把报错粘在这里>
请告诉我原因，并给我可以直接复制执行的解决命令。

如果页面能打开但样子乱了，就说：「页面能打开，但和之前的静态页面长得不一样了，示例任务没显示。请把外观改回和原来一致。」

本章小结

这一章只做一件事：把静态页面搬进 Vue 项目，用 npm run dev 启动，在浏览器看到「和以前一样」的页面。看起来没变，其实脱胎换骨——下面就让它活起来。

18. 添加任务

这一章要解决什么问题

这是整个部分的第一个真功能：在输入框里打字，点「添加」，任务真的出现在列表里。上一部分点了没反应的按钮，这一章让它动起来。

这是什么

还记得第 16 章的比喻吗？页面连着一份数据清单，改清单，页面自动变。「添加任务」就是：把输入框里的文字，作为一条新任务，塞进那份清单里。剩下的显示，Vue 自动搞定。

为什么现在做它，而且只做它

💡 这是一道关于「节奏」的选择题：我们本可以一口气让 AI 把添加、删除、完成全做了。但我们选择一次只做一个功能。为什么？因为一次只做一件事，验收最简单——出问题也一眼能定位是哪一步坏了。贪多，是初学者最容易翻车的地方。

让 Claude Code / Codex 执行的小任务

任务目标：
给 Todo 页面加上「添加任务」功能。

当前状态：
页面已经是 Vue 3 项目，有输入框和「添加」按钮，但点按钮还没有任何反应，
任务列表现在是写死的示例数据。

限制条件：
这次只做前端本地添加，不接后端、不加数据库。
只做「添加」这一个功能，先不要做删除和完成。

期望结果：
1. 我在输入框里输入一段文字，点「添加」按钮，这段文字作为一条新任务出现在列表里。
2. 添加成功后，输入框自动清空，方便我接着输入下一条。
3. 如果输入框是空的（或只有空格），点「添加」不添加任何东西。

验收标准：
1. 正常输入内容并点添加，列表里正确多出这一条。
2. 添加后输入框被清空。
3. 空内容点添加，列表没有多出空白任务。
4. 整个过程页面不报错。

运行后应该看到什么结果

刷新页面，在输入框里敲「健身 30 分钟」，点「添加」——列表底部多出「健身 30 分钟」，同时输入框变空。再敲一条、再点，又多一条。试着不输入直接点「添加」，列表不会多出一条空白。

如何验收结果是否正确

这四条验收标准，请你亲手一条条试，这就是判断题：

• 输入「买菜」点添加 → 列表里出现「买菜」了吗？
• 添加完，输入框清空了吗？
• 什么都不输入直接点添加 → 有没有冒出一条空任务？（应该没有）
• 全程按 F12 看控制台，有没有红色报错？

💡 注意第 3 条「空输入不添加」。这叫边界情况——正常人不会故意加个空任务，但真实产品必须扛得住「有人乱来」。能主动想到并验收边界情况，你就比很多人更像一个产品负责人了。

如果结果不对，怎么反馈给 AI

比如添加后输入框没清空，就照实说：

添加功能能用，任务能正确加到列表里。但有两个小问题：
1. 添加后输入框里的文字没有清空。
2. 我不输入任何内容直接点添加，列表里会多出一条空白任务。
请修复这两点，其他保持不变。

本章小结

你实现了第一个真功能：能添加任务。更重要的是，你学会了给一个功能列验收清单，尤其是「空输入不添加」这种边界情况——这才是验收的精髓。

19. 删除任务

这一章要解决什么问题

有加就得有减。这一章给每条任务旁边配一个删除按钮，点一下，这一条消失，别的不受影响。

这是什么

同样回到那份数据清单：删除任务，就是把某一条从清单里拿掉，页面自动少一行。关键难点不在「删」，而在删得准——点哪条删哪条，绝不能误伤旁边的。

为什么这件事要单独验收

💡 删除是最容易「删错」的操作，也是初学者最该盯紧的判断题。你要验收的不只是「那一条没了」，还有「其他条一根汗毛都没动」。做产品养成这个意识：一个操作，既要看它做到了该做的，也要看它没碰不该碰的。

让 Claude Code / Codex 执行的小任务

任务目标：
给 Todo 列表的每一条任务加上「删除」功能。

当前状态：
页面是 Vue 3 项目，已经能添加任务了。任务以列表形式显示。

限制条件：
这次只做删除功能，仍然是前端本地操作，不接后端、不加数据库。
不要改动已有的添加功能。

期望结果：
1. 每一条任务的旁边，有一个「删除」按钮（或一个小垃圾桶图标）。
2. 点某一条的删除按钮，只有这一条从列表里消失，其他任务原样保留。
3. 当所有任务都被删光时，列表区域显示一句友好的提示，
   比如「还没有任务，先添加一个吧」，而不是一片空白。

验收标准：
1. 点第二条的删除按钮，消失的正好是第二条，第一条和第三条不受影响。
2. 把任务全部删完后，页面显示「暂无任务」之类的友好提示。
3. 添加功能依然正常。
4. 页面不报错。

运行后应该看到什么结果

每条任务右边多了个删除按钮。你先加三条「买菜、写周报、健身」，点中间「写周报」的删除按钮——只有「写周报」消失，「买菜」和「健身」还在原位。把三条全删掉后，列表区域出现一句「还没有任务，先添加一个吧」。

如何验收结果是否正确

• 删得准：点第 2 条，消失的确实是第 2 条？
• 不误伤：删完之后，剩下的任务对不对、顺序乱没乱？
• 空列表的样子：全删光时，是友好提示，还是尴尬的空白？
• 添加功能有没有被顺手改坏？
• 有没有红色报错？

💡 第 3 条「空列表长什么样」很容易被忽略。空的时候页面别开天窗，给用户一句人话，这是产品是否用心的一个小细节。你现在就能想到并验收它，很棒。

如果结果不对，怎么反馈给 AI

假如删除误伤了别的任务：

删除按钮有问题：我点第二条的删除，结果消失的是第一条，删错了。
请修复，保证点哪一条就只删哪一条，其他任务不受影响。

本章小结

你实现了删除，并且守住了删除的两条铁律：删得准、不误伤。你还顺手照顾了「空列表」这个容易被忽略的细节。验收一个操作，永远要问「有没有碰到不该碰的」。

20. 完成任务

这一章要解决什么问题

一个 Todo，光能加能删还不够——你得能勾掉已经做完的事。这一章让每条任务可以在「未完成」和「已完成」之间切换，并且一眼就能看出区别。

这是什么

「完成」不是把任务删掉，而是给它换个状态：从「待办」变成「已完成」。视觉上通常用打勾或加删除线来表示。而且这个状态要能来回切——万一你点错了，或者一件事又需要重做，再点一下就能变回未完成。

为什么强调「能切回来」

💡 这是一道体贴用户的选择题：完成后能不能反悔？我们选择让它可以来回切换。因为人会手滑、会改主意，一个不能撤销的操作会让人用得提心吊胆。好产品，允许用户犯错并轻松纠正。 这个小小的「可逆」设计，体现的是产品思维。

让 Claude Code / Codex 执行的小任务

任务目标：
给每条任务加上「标记完成 / 取消完成」的功能。

当前状态：
页面是 Vue 3 项目，已经能添加和删除任务。

限制条件：
这次只做「完成状态」的切换，仍是前端本地操作，不接后端、不加数据库。
不要破坏已有的添加和删除功能。

期望结果：
1. 每条任务前面有一个可以点的勾选框（或点击任务本身即可）。
2. 点一下，把这条标记为「已完成」：给它加上删除线，颜色变淡，
   让它明显区别于未完成的任务。
3. 对已完成的任务再点一下，能取消完成，恢复成未完成的样子。

验收标准：
1. 点一条未完成任务，它变成「已完成」的样子（有删除线、颜色变淡）。
2. 对已完成任务再点一下，恢复成未完成的样子。
3. 完成和未完成的任务，视觉上一眼能区分。
4. 添加、删除功能依然正常，页面不报错。

运行后应该看到什么结果

每条任务前多了个可点的勾选框。你点「买菜」——它立刻加上删除线、颜色变灰，一看就是「做完了」。再点它一下，删除线消失、颜色恢复，又变回「待办」。完成的和没完成的混在列表里，你一眼就能分清。

如何验收结果是否正确

• 能标记完成：点一下，变成完成的样子？
• 能取消完成：再点一下，变回未完成？
• 区分明显：完成 vs 未完成，扫一眼就能分辨？
• 加、删功能没被弄坏？
• 没有红色报错？

如果结果不对，怎么反馈给 AI

比如能标记完成但没法取消：

完成功能大体能用，但有个问题：任务标记为完成后，再点一下没法取消，
一直是完成状态。请让它可以来回切换：已完成的再点一次能恢复成未完成。

本章小结

你的 Todo 现在能加、能删、能勾完成了，而且完成状态可以来回切换。「可逆」这个小设计背后，是「允许用户犯错」的产品思维。到这里，一个真正能用的待办清单，功能上已经齐了。

21. Tailwind CSS 是什么

这一章要解决什么问题

功能齐了，但你可能发现：加了这么多按钮、勾选框之后，页面样式有点乱、有点杂。这一章介绍 Tailwind CSS，让 AI 用它来把整个界面快速拼得统一又好看。

这是什么

Tailwind CSS 是一套样式积木。

打个比方：普通写样式，像每次都要自己调颜料——想要一点间距、一个圆角、一个阴影，都得从头描述。而 Tailwind 给了你一大盒乐高积木：间距-大、圆角-中、阴影-淡、文字-灰……每一块都是现成的、标准尺寸的小样式。你要装修页面，不用调颜料，直接拼积木。

因为大家用的是同一盒标准积木，拼出来的东西风格自然就统一——间距是一套标准间距，圆角是一套标准圆角，不会这里 7 像素那里 13 像素地各行其是。

为什么现在需要它

我们的页面元素越来越多，最怕的就是东一块西一块、风格打架。Tailwind 用「统一的积木」从根上避免了这个问题。而且它特别适合和 AI 搭配：你只要让 AI「用 Tailwind 统一美化」，它就能用这套标准积木把风格拉齐，你验收起来也省心。

💡 你完全不需要去背这些积木叫什么名字（那是 AI 的活）。你只需要记住一句话：让 AI 用 Tailwind 来做样式，页面风格会更统一、更好看、更好维护。 这就是你现在需要知道的全部。

在 AI Todo 项目里怎么用

我们不新增功能，只让 AI 用 Tailwind 把现有界面整体梳理一遍：让间距、圆角、颜色、按钮风格统一起来，让完成/未完成的对比更清晰。

任务目标：
用 Tailwind CSS 统一美化整个 Todo 页面的样式。

当前状态：
页面是 Vue 3 项目，已经能添加、删除、标记完成，但加了这些元素后样式有点杂乱。

限制条件：
只调整样式，不要改动任何功能（添加、删除、完成都要照常能用）。
风格要简单清晰、干净现代，不要花哨。请用 Tailwind CSS 来实现。

期望结果：
1. 整个页面用 Tailwind 统一风格：间距、圆角、颜色协调一致。
2. 输入框和「添加」按钮好看、协调。
3. 任务列表每一条清爽、有合适的分隔，删除按钮位置合理。
4. 已完成和未完成的任务，视觉对比清晰。

验收标准：
1. 页面明显比之前整齐、好看，风格统一。
2. 在手机窄屏和电脑宽屏下都不错乱。
3. 添加、删除、完成三个功能全部照常可用，页面不报错。

如何验收结果是否正确

• 整体比之前顺眼、统一了吗？
• 拉窄浏览器窗口试试（第三部分学过的手机效果检查），会不会挤成一团？
• 三个功能——加、删、完成——是不是都还好用？（改样式最怕顺手改坏功能，一定逐个试）
• 有没有红色报错？

如果结果不对，怎么反馈给 AI

样式统一多了，好看了不少。但发现一个问题：美化之后，删除按钮点不动了，
点了没反应。请检查是不是样式覆盖影响了删除功能，修好它，样式保持现在这样。

本章小结

Tailwind 是一盒「标准样式积木」，让 AI 拼出来的界面风格统一、好维护。你不用背积木名字，只要记得「让 AI 用 Tailwind 美化」，并在验收时顺带确认功能没被改坏。

22. 页面结果验收

这一章要解决什么问题

前面几章我们一个功能一个功能地做、一个功能一个功能地验。这一章把这一整个「前端应用」当成一个整体，从头到尾完整验收一遍，给你一份可以随身带走的清单。也正是在这次完整验收里，我们会撞见一个「说好的坑」。

「前端应用」完整验收清单

打开你的页面，跟着这份清单，一条条亲手试过去：

基本外观

• 页面能正常打开，不空白、不报错（F12 看控制台没红字）？
• 标题、输入框、添加按钮、任务列表都在，布局整齐、风格统一？

添加

• 输入内容、点添加，任务正确出现在列表里？
• 添加后输入框自动清空？
• 空输入点添加，不会冒出空白任务？

删除

• 点某条的删除，消失的正是那一条，其他不受影响？
• 全部删光时，显示友好提示而不是一片空白？

完成

• 点一下能标记完成（删除线 / 变淡）？
• 再点一下能取消完成？
• 完成与未完成，一眼能区分？

扛得住吗

• 窄窗口 / 手机尺寸下，布局不乱、不溢出？
• 输入超长文字、连续快速点按钮，页面不崩？

最后，也是最关键的一条——

• 添加几条任务后，刷新一下浏览器（按 F5），你的任务……还在吗？

撞见那个「说好的坑」

你会发现：刷新之后，你辛辛苦苦加的任务，全没了，页面又回到了最初的样子。

这不是 bug，别去找 AI 修——这是我们这一整部分的技术选择必然带来的结果。

💡 还记得开头说的吗？我们这一部分的数据「只存在浏览器内存里」。内存就像人的短期记忆：页面一刷新，内存清空，它就全忘了。 想让任务记住、存下来、下次打开还在，光靠前端不够——我们需要给它配一个后端和一个数据库，一个专门负责「长期记住数据」的地方。

这，就是下一部分要解决的问题。你现在能亲手复现并理解这个「刷新即失忆」的痛点，说明你已经完全看懂了「纯前端」的边界在哪——这份理解，比任何代码都值钱。

本章小结

用这份完整清单，你能独立验收一个前端应用：能加、能删、能完成、空输入被拦、窄屏不乱。你也亲手撞见并读懂了那个致命痛点——刷新一下，数据全没。带着这个痛点，我们进入下一部分。

这一部分的收尾

回头看看你这一部分收获了什么。你的 AI Todo 从一个「样板间」变成了一个真正能用的前端应用：

• ✅ 用 Vue 让页面随数据自动变化（改数据，画面就变）；
• ✅ 能添加任务（还挡住了空输入这种边界情况）；
• ✅ 能删除任务（删得准、不误伤、空列表有友好提示）；
• ✅ 能标记完成 / 取消完成（可逆，允许用户反悔）；
• ✅ 用 Tailwind 把界面拼得统一又好看；
• ✅ 学会了把一整个应用当成整体来验收。

更重要的是，你一次只做一个小功能、每个功能都列清单验收的工作节奏，已经越来越熟练了。

但你也亲手摸到了一堵墙：刷新一下，数据就全没了。 因为这些任务只活在浏览器的「短期记忆」里，没有一个地方帮它们长期保存。

要让任务真正「记得住」，我们需要给应用配上后端和数据库。带着这个再明确不过的目标，我们进入 第五部分：加入后端，让你的 Todo 拥有一个「不会失忆」的大脑。