07. Web 开发实战 (上)：DevTools 与组件开发

课时信息

📅 时间：15:20 - 16:05 🎯 目标：精通 Chrome DevTools 调试技巧，启动 Web 实战项目

1. 实战任务：启动你的数字简历

我们还是以“数字简历”为例，因为它结构清晰，适合练习组件化。

第一步：初始化项目 (AI 全自动)

Vibecoding 核心心法：能不写代码就不写代码，连初始化命令都懒得敲。

Prompt 示例 (在 Cursor/Trae 的 Composer 中输入)：

"帮我初始化一个 Next.js 项目，使用 TypeScript, Tailwind CSS 和 App Router。项目名叫 my-resume。目录结构要清晰。"

AI 会直接帮你执行 npx create-next-app 并选好配置。你只需要点 Accept。

第二步：组件拆解

不要在大脑里只想着“写简历”，要拆解：

1. HeroSection: 头像、名字、一句话介绍。
2. TechStack: 技能图标列表。
3. Experience: 时间轴工作经历。

第三步：Vibecoding 流程 (AI 辅助)

Prompt 示例：

"作为资深前端工程师，请帮我用 React + Tailwind CSS 实现一个 HeroSection 组件。 要求：

1. 左边是圆角头像 (占位图)，右边是姓名和职位。
2. 背景是淡灰色渐变。
3. 包含 GitHub 和 LinkedIn 的图标按钮。 请直接给出代码。"

---

2. 动手时间 (Workshop)

现在是你的 Coding Time。

任务清单：

1. [ ] 创建项目并跑通 (npm run dev)。
2. [ ] 用 F12 修改一下页面标题，截图纪念。
3. [ ] 让 AI 生成第一个组件 HeroSection 并放到页面上。
4. [ ] 遇到报错？ 打开 Console，把红字截图发给 AI，问它“怎么修”。

常见坑

• Hydration Error: 本地 HTML 和服务器不一致。通常是因为 HTML 结构嵌套错误（如 <p> 里套了 <div>）。
• Module not found: 忘了 npm install 某个包。