PHASE 0101—02
组件与状态
理解框架解决的问题，掌握 React 19.2 的组件、状态、Effect 和并发 UI。
从会写组件，到能交付生产级全栈应用
现代前端框架工程
一条项目驱动的现代框架学习路线：先建立渲染与组件心智模型，再掌握 React、Next.js、Vue、Nuxt，最后补齐状态管理、构建、测试、性能、安全与技术选型。稳定基线更新至 2026 年 7 月。
MODULES10
EST. TIME约 76 小时
FOR已经了解 HTML、CSS、JavaScript 基础，希望从小白成长为能独立负责中大型前端项目的学习者。
OUTCOME完成后，你能够根据业务选择 React/Next.js 或 Vue/Nuxt，设计清晰的数据流和工程边界，并用测试、性能、安全与可观测性标准把应用可靠地交付到生产环境。
/ LEARNING MAP
先看全局，
再走每一步。
路线被拆成四个能力阶段。每个阶段都有明确的通关证据，不靠“学完视频”判断进度。
PHASE 0203—05
全栈渲染框架
掌握 Next.js 16.2、Vue 3 和 Nuxt 4 的渲染、数据与路由边界。
PHASE 0306—08
数据、构建与测试
按状态类型选工具，理解 Vite 8.1、Monorepo 和完整测试体系。
PHASE 0409—10
生产架构与选型
解决性能、安全、可观测性、迁移与团队协作问题。
/ CURRICULUM
从原理到生产，
一步一步往前走。
每个模块包含白话解释、最小实验、常见错误、实战任务与官方资料。建议按顺序推进，并在完成项目后再进入下一阶段。
10 / 10
01
框架心智模型：先看懂一座城市，再学怎么盖楼
不急着背 API。先用一张完整地图认识组件、响应式、路由、构建与渲染模式，理解浏览器、框架和服务器各自承担什么工作。
组件与组件树声明式 UI状态与派生状态SPA 与 MPA
开始学习↗
02
React 19.2：从第一个组件到并发交互
围绕一个任务看板逐步学习 React，不从零散 Hook 清单开始，而是从数据如何变成界面、一次交互如何触发更新开始。
JSX 与组件纯函数Props、State 与事件状态结构与状态提升Reducer 与 Context
开始学习↗
03
Next.js 16.2：把 React 应用带到服务器
用 App Router 构建真实内容与商业页面，掌握 Server/Client Components 边界、数据读取、缓存、变更、SEO 和部署，而不是把 Next.js 当成另一个路由库。
App Router 文件约定Server 与 Client Components数据读取与 StreamingServer Functions 与表单
开始学习↗
04
Vue 3：用响应式思维搭建可维护界面
从单文件组件和模板出发，通过一个运营后台掌握 Composition API、响应式系统、组件通信、路由、过渡动画与 TypeScript。
单文件组件模板与指令ref 与 reactivecomputed 与 watch
开始学习↗
05
Nuxt 4：从 Vue 页面到混合渲染全栈应用
学习 Nuxt 4 的 app 目录、自动导入、数据层、Nitro 服务端与混合渲染，用约定优于配置的方式交付内容与业务系统。
Nuxt 4 项目结构Pages 与 LayoutsMiddleware 与 PluginsuseFetch 与 useAsyncData
开始学习↗
06
状态与服务端数据：先分类，再选工具
把状态分成局部、派生、URL、表单、全局客户端和服务端数据，再决定使用框架内置能力、Redux Toolkit、Pinia 或 TanStack Query。
状态分类派生状态与 URL 状态React Reducer/ContextRedux Toolkit
开始学习↗
07
构建与工作区：看懂代码如何变成产品
以 Vite 8.1 与 Rolldown 为主线看懂依赖图、开发服务器、生产构建和插件机制，再把应用、组件库和共享配置组织成可扩展工作区。
ES Modules 与包导出依赖图与 Tree ShakingVite 8.1 与 RolldownHMR 与开发服务器
开始学习↗
08
测试体系：用最低成本守住最高风险
不追求漂亮的覆盖率数字，而是从用户风险出发，用 Vitest 4.1、Testing Library 和 Playwright 构建快速、稳定、可调试的质量反馈链。
风险驱动测试策略Vitest 4.1Testing LibraryMock 与 Fixture
开始学习↗
09
生产级架构：性能、安全与可观测性
把能运行的项目升级为可长期维护的产品：建立业务边界、设计系统、性能预算、安全基线、无障碍标准和故障定位能力。
业务模块与依赖边界设计系统SSR 与 Hydration 故障缓存分层与 CDN
开始学习↗
10
框架选型与毕业项目：用约束做决定
不靠热度投票选框架。先写清 SEO、交互、团队、服务端、部署、生态和迁移成本，再做小型验证，最后用一份架构决策记录承担选择。
业务约束清单框架选型矩阵Vite SPA 适用场景Next.js 与 Nuxt 对比
开始学习↗
/ TOOLKIT
该学什么工具，
什么时候用。
工具不是收藏清单。先理解它解决的边界，再通过官方文档和项目任务形成自己的选择标准。
01 / UI
React 19.2
组件、Actions、Suspense、Activity 和现代并发 UI。
↗02 / OPTIMIZATIONReact Compiler
由编译器自动应用安全的组件与 Hook 优化。
↗03 / FULL STACKNext.js 16.2
App Router、RSC、Streaming、缓存与 Adapter API。
↗04 / UIVue 3
Composition API、响应式系统和单文件组件。
↗05 / FULL STACKNuxt 4
Vue 全栈、混合渲染、Nitro 和内容应用。
↗06 / ROUTINGReact Router / Vue Router
嵌套路由、数据加载、导航状态和错误边界。
↗07 / SERVER STATETanStack Query
缓存、失效、分页、乐观更新和离线恢复。
↗08 / CLIENT STATERedux Toolkit / Pinia
复杂共享状态的可预测更新与调试。
↗09 / BUILDVite 8.1
Rolldown 统一构建、HMR、插件和大型应用实验模式。
↗10 / TESTVitest 4.1
单元、组件、浏览器模式和覆盖率。
↗11 / COMPONENT TESTTesting Library
从用户可观察行为出发编写稳健测试。
↗12 / E2EPlaywright
跨浏览器业务流程、Trace 和网络模拟。
↗/ PORTFOLIO
四个项目，
串起整条路线。
每个项目都要提交代码、决策记录、测试证据与复盘。越到后期，评价标准越接近真实生产环境。
双框架任务看板
分别用 React 与 Vue 实现同一需求，对比状态和组件心智模型。
ReactVueState
商业内容平台
Next 或 Nuxt 实现 SEO、搜索、草稿、缓存和混合渲染。
SSRCachingSEO
多框架 Monorepo
共享设计令牌、类型、组件包、测试和版本发布。
ViteWorkspaceCI
生产级知识平台
完成 ADR、性能、安全、可观测性、灰度和跨浏览器验收。
ArchitectureObservabilityDelivery
/ CAPSTONE PROJECT
毕业项目
自主选择 Next.js 或 Nuxt，完成一个包含公开内容、搜索、登录、角色权限、管理后台、缓存、测试、SEO、性能预算与 CI/CD 的商业知识平台。
FINAL / BUILD框架工程
可运行产品
测试与质量报告
架构决策与复盘
云端部署与演示
/ OFFICIAL LIBRARY
资料不求多，
先读一手来源。
这里优先收录规范、官方教程和维护者文档。课程负责讲人话，资料库负责让你继续深挖和核对版本。
01
COURSE · 入门—进阶React Learn
组件、状态、Reducer、Context、Effect 和逃生舱。
↗02RELEASE · 进阶React 19.2
Activity、useEffectEvent、cacheSignal 与性能轨道。
↗03REFERENCE · 进阶—高级Next.js App Router
路由、RSC、数据、缓存、Metadata、安全与部署。
↗04RELEASE · 进阶—高级Next.js 16.2
性能、调试、Turbopack 和 Agent 开发体验更新。
↗05COURSE · 入门—进阶Vue Guide
模板、组件、响应式、Composable 和规模化应用。
↗06REFERENCE · 进阶—高级Nuxt 4 Docs
app 目录、数据获取、Nitro、混合渲染和部署。
↗07RELEASE · 高级Nuxt 4.4
数据工厂、路由、可访问性、构建分析和 payload 更新。
↗08RELEASE · 进阶—高级Vite 8.1
Rolldown 架构与大型应用的 Bundled Dev Mode。
↗09COURSE · 进阶Redux Essentials
使用 Redux Toolkit 建立真实应用状态流。
↗10REFERENCE · 进阶TanStack Query
服务端状态缓存、失效、变更和离线策略。
↗11TEST · 进阶—高级Vitest Guide
Mock、Fixture、覆盖率、浏览器模式和工作区。
↗12E2E · 进阶—高级Playwright Docs
Locator、自动等待、多浏览器、Trace 和 CI。
↗/ FAQ
开始之前，
先把疑问说清楚。
01React 和 Vue 应该先学哪个？＋
任选一个作为主线，另一个用于比较。React 更强调 JavaScript 与单向数据流，Vue 提供更完整的模板与响应式体验；真正重要的是理解状态、渲染、数据和组件边界。
02Next.js 和 Nuxt 是后端框架吗？＋
它们是全栈 Web 框架，既负责服务端渲染、路由和数据，也能承载 API 与 Server Functions。复杂领域服务仍应有清晰后端边界。
03什么时候不需要全局状态库？＋
局部状态留在组件，派生状态实时计算，筛选条件放 URL，服务端数据交给查询缓存。只有跨多个业务区域、更新规则复杂的客户端状态才值得进入全局 Store。
04Server Components 会取代 Client Components 吗？＋
不会。Server Components 适合数据读取、敏感逻辑和减少客户端 JavaScript；交互、浏览器 API 和本地状态仍需要 Client Components。关键是把边界放对。
05如何避免框架学完就过时？＋
把重点放在组件、状态、渲染、缓存、网络和质量这些稳定问题上；版本特性放进技术雷达，并通过官方迁移指南更新，而不是反复重学整个框架。
06框架选型最重要的依据是什么？＋
SEO 与渲染需求、交互密度、团队经验、后端边界、部署平台、生态、性能预算和迁移成本。用 ADR 记录约束与证据，不按流行度投票。
继续探索其他知识库