WHY IT MATTERS
先用一句白话理解
技术选型像选交通工具：没有永远最强的车，只有是否适合人数、路况、距离、预算和维修能力。
LEARNING OUTCOMES
学完你能做到什么
建立可复用的框架选型矩阵和 ADR 模板
判断 Vite SPA、Next.js 与 Nuxt 的合理边界
用短周期技术验证降低未知风险
规划存量应用渐进迁移、双轨运行和回滚
独立交付并讲解一个生产级毕业项目
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
业务约束清单
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
框架选型矩阵
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Vite SPA 适用场景
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Next.js 与 Nuxt 对比
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
生态与团队成本
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
平台锁定与可移植性
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
技术验证
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
ADR
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
渐进迁移
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
毕业答辩
先区分组件、状态、渲染、网络与服务端边界。把这个概念放回“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
为同一需求分别设计 Vite SPA、Next.js 和 Nuxt 方案
选出两个最大风险并做可运行的技术验证
提交包含替代方案、代价和退出策略的 ADR
完成毕业项目的构建、测试、部署与答辩
HANDS-ON PROJECT
动手任务
自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。
交付清单
- ✓框架选型矩阵与 ADR
- ✓两项高风险技术验证
- ✓线上毕业项目、源码和运维说明
- ✓性能、安全、测试与可访问性验收报告
MINIMUM RUNNABLE CODE
可解释的第一轮选型函数
type Stack = "Vite SPA" | "Next.js" | "Nuxt";
function chooseStack(input: {
needsSeo: boolean;
team: "React" | "Vue";
hasSeparateBackend: boolean;
}): Stack {
if (!input.needsSeo && input.hasSeparateBackend) return "Vite SPA";
return input.team === "React" ? "Next.js" : "Nuxt";
}
console.log(
chooseStack({ needsSeo: true, team: "Vue", hasSeparateBackend: false }),
); // Nuxt先让它跑起来，再逐行修改。最有效的学习方式，是观察你的改动如何影响结果。
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 为同一需求分别设计 Vite SPA、Next.js 和 Nuxt 方案
- 选出两个最大风险并做可运行的技术验证
- 提交包含替代方案、代价和退出策略的 ADR
- 完成毕业项目的构建、测试、部署与答辩
改变约束，验证你真的理解
- 不看教程，独立完成：建立可复用的框架选型矩阵和 ADR 模板
- 不看教程，独立完成：判断 Vite SPA、Next.js 与 Nuxt 的合理边界
- 不看教程，独立完成：用短周期技术验证降低未知风险
- 不看教程，独立完成：规划存量应用渐进迁移、双轨运行和回滚
- 不看教程，独立完成：独立交付并讲解一个生产级毕业项目
把实验变成能交付的工程
- 框架选型矩阵与 ADR
- 两项高风险技术验证
- 线上毕业项目、源码和运维说明
- 性能、安全、测试与可访问性验收报告
- 检查缓存、Hydration、错误恢复、可观测性和部署约束，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
因为招聘数量、明星项目或社交媒体热度直接拍板
只比较语法，不比较渲染、部署、团队和长期维护成本
在技术验证里只做 Hello World，没有验证真正风险
一次性重写存量系统且没有观测、回滚与双轨计划
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
不靠热度投票选框架。先写清 SEO、交互、团队、服务端、部署、生态和迁移成本，再做小型验证，最后用一份架构决策记录承担选择。
Q02如果只能保留三个验收结果，应该保留什么？＋
框架选型矩阵与 ADR；两项高风险技术验证；线上毕业项目、源码和运维说明
Q03学习过程中最需要主动避免什么？＋
因为招聘数量、明星项目或社交媒体热度直接拍板；只比较语法，不比较渲染、部署、团队和长期维护成本；在技术验证里只做 Hello World，没有验证真正风险；一次性重写存量系统且没有观测、回滚与双轨计划
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“自主选择 Next.js 或 Nuxt，交付具备内容、搜索、权限、后台、缓存、测试、SEO 和 CI/CD 的商业知识平台。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：建立可复用的框架选型矩阵和 ADR 模板
- □核心机制已用最小实验验证：为同一需求分别设计 Vite SPA、Next.js 和 Nuxt 方案
- □风险已检查：因为招聘数量、明星项目或社交媒体热度直接拍板
- □风险已检查：只比较语法，不比较渲染、部署、团队和长期维护成本
- □风险已检查：在技术验证里只做 Hello World，没有验证真正风险
- □风险已检查：一次性重写存量系统且没有观测、回滚与双轨计划
- □交付物可复现：框架选型矩阵与 ADR
- □交付物可复现：两项高风险技术验证
- □交付物可复现：线上毕业项目、源码和运维说明
- □交付物可复现：性能、安全、测试与可访问性验收报告
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。