D12 Vue3 + Vite 前端基础 — 课件

1. 封面

• D12 Vue3 + Vite｜第 2 周

2. 目录

• 前端三件套 / Vite 启动 / 组合式API / 调后端 / 路由组件 / 前后端契约

3. 前端基础与 Vite

• 幻灯1：HTML + CSS + JS/TS
• 幻灯2：Vite = 秒启 + 热更新
• 幻灯3：公司例子 —— sub-box/web

4. 启动项目（现场演示）

• 幻灯1：create vite → npm run dev
• 幻灯2：目录结构（src/components/router）

5. 组合式 API

• 幻灯1：ref / computed / @click
• 幻灯2：模板自动解包，script 里要 .value
• 幻灯3：一段真实组件示例

6. 调后端 API

• 幻灯1：fetch + 带鉴权头（呼应 D10）
• 幻灯2：res.ok / 4xx / 5xx 处理
• 幻灯3：CORS 与 Vite 代理 —— 现场踩坑再解决

7. 路由与组件

• 幻灯1：vue-router 基本配置
• 幻灯2：组件拆分原则

8. 前后端契约

• 幻灯1：后端 Swagger 是契约文档
• 幻灯2：契约先行，各自开发
• 幻灯3：第 4 周项目 D17 就做这件事

9. 常见误区

• 幻灯1：.value 混淆 / CORS 甩锅 / 前端鉴权 ≠ 安全

10. 作业布置

• 幻灯1：给 D10 的 users API 做管理页（详见作业.md）

11. 结尾

• 预告 D13：LLM 基础与 Claude API —— 进入主营业务