06. 现代前端开发基础与实战选题

课时信息

📅 时间：14:20 - 15:05 🎯 目标：理解组件化开发思维，掌握 Vue 3 + Vite 基础，确定实战项目方向

1. 什么是 "现代" 前端？

以前写网页是写文档 (HTML)，现在写网页是写应用 (App)。

核心区别

维度	传统模式 (HTML + jQuery)	现代模式 (Vue/React + Vite)
思维方式	它是页面 (Page)	它是组件 (Component)
数据流	手动修改 DOM ($('#id').text(...))	响应式数据 (state -> UI 自动更新)
运行方式	浏览器直接跑	需要编译 (Build) 才能跑
模块化	很难复用	import ComponentName

核心概念：组件化 (Component)

就像搭乐高。一个页面由 Header, Sidebar, Content, Footer 等小块拼装而成。

• 优势：AI 写小组件非常厉害，准确率极高。

---

2. 工具链选择：Vue vs Next.js

在 AI 辅助编程下，我们推荐两个主流流派：

选项 A: Vite + Vue 3 (易上手)

• 特点：语法简单，直觉符合人类思维。
• 适用：纯前端项目，快速原型。
• 启动：

  npm create vite@latest my-app -- --template vue-ts

选项 B: Next.js (React 全栈 - 工业标准)

• 特点：Vercel 亲儿子。自带后端 API 路由 (Server Actions)，如果你想做一个带数据库的完整产品，选它。
• 适用：全栈应用，需要 SEO，需要后端逻辑。
• 启动：

  npx create-next-app@latest

如何选择？

• Vue 3：如果你喜欢 template / script 分离，逻辑清晰。
• Next.js：如果你想用 React 生态，或者需要直接部署到 Vercel 并自带后端能力。本次课程后续实战推荐尝试 Next.js。

---

3. UI 框架：Tailwind CSS (AI 的最爱)

为什么 AI 喜欢写 Tailwind？因为不需要去写额外的 .css 文件。样式直接写在 HTML 标签里，Token 消耗少，上下文不容易丢。

<!-- AI 很擅长输出这种原子化类名 -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

---

4. 开发者神器：Chrome DevTools

前端开发 50% 的时间在写代码，50% 的时间在 F12 (DevTools) 里调试。它是你和浏览器对话的唯一窗口。

如何打开？

• 快捷键：F12 或 Cmd+Option+I (Mac)。
• 右键：在页面任何元素上右键 -> 检查 (Inspect)。

核心面板详解

1. Elements (元素面板) - 医生的 X 光

• 作用：查看和修改当前页面的 HTML 和 CSS。
• 实战技巧：
  • 强制状态 (Toggle State)：点击 :hov，强制让按钮显示 hover 状态，方便调样式。
  • 即时修改：直接双击 HTML 修改文字，或者在右侧 Styles 面板修改 CSS，所见即所得。
  • Vibecoding 秘技：右键元素 -> Copy outerHTML。把这段代码发给 AI：“照着这个结构帮我写一个 React 组件，但把颜色改成蓝色”。

2. Console (控制台) - 这种 Log 没白打

• 作用：查看 JavaScript 报错 (Red) 和 console.log 输出。
• 实战技巧：
  • 交互式编程：直接在 Console 里输 alert(1) 或 document.body.style.background = 'red'，立即生效。
  • $0 大法：在 Elements 面板选中一个元素，然后在 Console 输 $0，它就是那个元素对象。

3. Network (网络面板) - 抓包神器

• 作用：看网页加载了什么资源，发了什么 API 请求。
• 关键列：
  • Status: 200 (成功), 404 (没找到), 500 (服务器炸了)。
  • Type: fetch/xhr (API 请求)。
• 实战技巧：点击一个 API 请求，查看 Preview (响应数据) 和 Payload (发送数据)。这是调试接口最快的方法。

---

5. 实战选题建议 (Project Ideas)

接下来的时间，请从以下三个选题中选择一个作为今天的实战目标。

选题 A: 极简个人数字名片 (Landing Page)

• 难度：⭐⭐
• 描述：一个展示你个人信息、社交链接、技能栈的单页网站。
• 技术点：响应式布局、Tailwind 排版、CSS 动画。
• 适合：完全零基础的同学。（第 07 课将以此为例）

选题 B: AI 智能待办清单 (Todo with AI)

• 难度：⭐⭐⭐
• 描述：不仅能增删改查任务，还能让 AI 帮你拆解任务（调用 Qwen API）。
• 技术点：Vue 状态管理 (ref), API 调用, 列表渲染。
• 适合：有一定编程逻辑的同学。

选题 C: 随机 Meme 图生成器

• 难度：⭐⭐⭐
• 描述：随机抓取一张图片，配上你输入的文字，生成表情包。
• 技术点：Canvas 操作 (或 CSS 覆盖), 外部 API 调用, 图片处理。
• 适合：喜欢整活的同学。

---

6. 课后思考

在 AI 时代，还需要学 div, span, v-if, v-for 吗？ 需要。因为 AI 写出的代码可能会有小 bug（比如样式没对齐），如果你不懂基础标签，你就无法进行“微创手术”式的修复。 你不需要成为砌砖大师，但你必须是合格的监工。