← FC Coder · HomePhase 01 · Lesson 06 · 60 min
Lesson06
Phase One · First App · Matchday 06 · Opening
我的第一个
Cursor
Today's 3 Jobs · 今天这三件事
- 01打开 Cursor + 召唤终端Cmd/Ctrl + ` 召唤化妆间
- 02终端打 `pnpm dev` · 看 ✓ Ready你的电脑变成一台服务器
- 03改 app/page.tsx 一个字 · Cmd + S · 浏览器秒变改文件 · 不刷新 · 自动变
Phase 0 你改的全是别人的网站 —— 刷新就没。今天起,你在自己电脑上跑一个网页,改一个字,关机明天还在。三件套:Cursor / 终端 / 浏览器。60 分钟后你做完一件 30 年前微软创始人房间里做的事。
Half 1 · 在脑子里
代码住在文件里 · 文件住在你电脑里
Phase 0 改 ea.com → 服务器在别处;今天改 app/page.tsx → 服务器是你自己。
EA · 服务器在 别人那 · 你只改自己浏览器内存
你 · 服务器在 你电脑 · 你改的是真文件,关机还在
你 · 服务器在 你电脑 · 你改的是真文件,关机还在
Phase 0
改 EA · 刷新就没
Phase 1
改文件 · 关机还在
门牌号
localhost:3000
localhost 的意思是「本地主人 / 你自己家」——只有你能看到。妈妈在隔壁手机上打同一个网址,什么都没有。
Essence · 热更新
改代码 → 浏览器秒变 · 不刷新
教练场边喊话,球员立刻变阵,比赛不停。Phase 1 最强的反馈循环。
改代码 → Cmd + S → 浏览器自动变
没热更新
关网页 → 重启 → 刷新 → 等 30 秒
有热更新
Cmd + S → 0.5 秒就变
为什么爽
每秒都有回报 · 不无聊
这是程序员能连续 3 小时写代码不觉得累的根本原因。今天你第一次感受到它的时候,可能会以为是巫术。
Roster · 今天 3 个新词
不用背 · 上手时会回来
Cursor 是工具 · Terminal 是化妆间 · Hot Reload 是奇迹。
- 01Cursor给程序员的 Word —— 改代码的程序。它的爹叫 VS Code,Cursor 是装了 AI 的版本(今天 AI 关嘴)。左边文件树 · 中间改代码 · 下面终端 · 三块同屏。
- 02Terminal化妆间 —— 球员上场前的地方,观众看不见,但所有真程序从这里开机。黑底白字 · 你打一行字 · 它听到 · 立刻做。
- 03Hot Reload热更新 · 改代码,浏览器秒变 —— 像教练场边喊话,球员立刻变阵,比赛不停。反馈时间 < 0.5 秒 · 程序员每天最爽的一秒。
Half 2 · 在屏幕上
把三件套都打开 · 让它们手拉手
做完一步就点 ✓。关掉浏览器也不丢。
01打开三件套 · 看清楚工位
01Min
打开 Cursor
双击 Cursor 图标(黑底白光标)。看到一个几乎全黑的窗口。
02Min
File → Open Folder · 打开 talkhat 文件夹
Mac: Cmd + O · Windows: Ctrl + K Ctrl + O。选爸爸提前下好的 talkhat 文件夹。看左边文件树出现一列文件名。
03Min
找到 app/page.tsx · 双击打开
在左边文件树里点 app/ 文件夹展开,看到 page.tsx,双击。中间出来一堆彩色的代码 —— 蓝 / 白 / 绿 / 金。别怕。
02终端开机 · 网页跑起来
04Min
召唤终端 · Cmd/Ctrl + `
Mac 按 Cmd + `(左上角反引号键)· Windows 按 Ctrl + `。Cursor 下半截弹出黑底白字 —— 那就是终端。最上一行可能写着 ~/Desktop/talkhat $ 等。打不开:View → Terminal 也行。
05Min
终端打 `pnpm dev` · 按 Enter
p-n-p-m 空格 d-e-v · Enter。终端疯狂滚字 —— 不是红字就是好事。等几秒看到 ▲ Next.js + ✓ Ready in ...ms · 服务器起来了。看红字 command not found / EADDRINUSE 找爸爸。
06Min
Chrome 访问 localhost:3000
打开 Chrome · 地址栏:localhost:3000 · Enter。看到 FC Coder · Season 01 着陆页 · 一张 99 ST 球员卡 · 6 个 Phase 的赛程列表。这是你的网页 · 跑在你电脑上 · 别人看不到。
03🌟 改一个字 · 看热更新
07Min
回 Cursor · Cmd/Ctrl + F 搜「我们一起」
回到 Cursor · 在 app/page.tsx 里 Cmd + F(Mac)或 Ctrl + F(Windows)· 搜 我们一起 · 高亮到那一行。
08Min
改成「我和(你名字)」
把「一起」两个字删掉 · 输入「和(你名字)」· 比如「我和狗蛋,做一个属于...」。
09Min
🌟 Cmd/Ctrl + S 保存 · 立刻切 Chrome
保存的瞬间切到 Chrome —— 大标题里「一起」变成了「和狗蛋」。你没刷新。这是热更新。再试一次:改 99 → 100 / 🧒 → ⚽ / Cmd + S · 立刻变。
04收官 · 关服务器 · 留念
10Min
终端按 Ctrl + C · 关掉服务器
光标点回终端 · 按 Ctrl + C(Mac 也是 Ctrl 不是 Cmd)· 回到 $ 等待状态。Chrome 再刷 localhost:3000 → 无法访问 · 因为关了。养成关习惯 · 下次开机不冲突。
11Min
📸 战利品截图
Mac Shift + Cmd + 4 框选 Cursor + Chrome 双屏。存 2026-XX-XX-我的第一次Cursor.png · Phase 1 第一张战利品。
Half Time · 中场 · 讲给爸爸听
4 题 · 用自己的话
答得出 3 个 · 今天就过。比喻准不准不要紧。
01Cursor / 终端 / 浏览器,分别像 EA FC 里的什么?各干什么?Hint ↓
手柄(改代码)/ 化妆间(开机)/ 电视(看结果)。讲得出各自的角色就过 —— 比喻准不准不要紧。
02你打了 `pnpm dev` 这一行 · 电脑里发生了什么?为什么 Chrome 能看到东西?Hint ↓
电脑变成了一台只对你自己开放的服务器,住在 localhost:3000 这个门牌号上。
03什么是热更新?今天看到最惊讶的一刻是什么?Hint ↓
改代码 → 浏览器自动变,不刷新。Cmd + S 那一刻是 Phase 1 第一个「哇」。
04今天和 Phase 0 改 ea.com 不一样在哪?Hint ↓
Phase 0 改的是别人的网站、刷新就没。今天改的是自己的文件、关电脑明天还在。这是 Phase 0 → 1 最根本的差。
Player Rating · 本课温度计
给 Phase 1 第一节打个分
没对错。说真话。爸爸会看到。
今天难度Difficulty
0
今天开心Fun
0
Final Whistle · 终场哨
三件套到齐 —— 你现在站在工位上了。
还有 11 步没打勾。Step 9 那一刻保存看到浏览器秒变,就算今天毕业 —— 其他可以慢慢补。