前端架构学习路线：从一个页面到一个能维护的产品
第一次打开前端项目，最吓人的往往不是代码，而是那一排名字：Vue、React、Vite、Router、Pinia、SSR。先别急着全部学会。我们从一个很具体的目标出发：做出能搜索、阅读、编辑文章的知识库，网络慢了也不乱，过三个月自己还看得懂。
先把几个名字放回正确的位置
HTML 负责内容语义，CSS 负责布局和样式，JavaScript 负责行为。Vue 和 React 帮我们把界面组织成组件，让数据变化能反映到页面。路由管理 URL 与页面的关系，状态方案管理数据归属，构建工具把源码变成浏览器能加载的资源。Nuxt、Next.js 又把服务端渲染、路由和交付约定组织起来。它们解决的是不同层面的问题。
“前端架构”是这些选择如何配合：搜索词放在哪，文章从哪来，谁能编辑，失败后怎么恢复。装了多少库不能说明架构好坏；改一个功能时能否找到地方、是否牵连无关模块，才比较说明问题。
按什么顺序读
| 阶段 | 本模块分区 | 做完后应能回答 |
|---|---|---|
| 0 | 从网页基础开始 | HTML/CSS/JS 是什么？怎样运行第一个页面？ |
| 1 | 浏览器与工程基础 | 页面为什么白屏？异步为什么也会卡？ |
| 2 | Vue 从入门到原理 | ref、computed、watch 分别负责什么？ |
| 3 | React 从入门到原理 | 为什么状态像快照？Effect 什么时候用？ |
| 4 | 组件与架构设计 | 状态属于谁？组件该拆到哪里？ |
| 5 | 路由数据与渲染 | 刷新、返回、慢请求和 SSR 如何配合？ |
| 6 | 质量安全与交付 | 怎样证明它可用、安全、发布后正常？ |
| 7 | 双框架实战与选型 | 用两种框架做同一需求，再说明取舍 |
完全初学时，先读网页与工程基础，再任选 Vue 或 React 一条线，写过组件后再学习组件边界与架构，最后完成实战。第一次不要来回换框架。已经会一个框架时，先看另一个框架的状态模型，再读双框架对照，收获比记一张 API 对照表大。
本课程的约定
零基础六课先使用普通 JavaScript；进阶 Vue 示例使用 Vue 3 Composition API、<script setup> 和 TypeScript；涉及响应式 props 解构时明确 Vue 3.5 边界。React 示例使用函数组件与常规 Hooks，基础示例兼容 React 18/19；React 19 的 Actions 等能力单独标出。Nuxt 章节按本知识库使用的 Nuxt 3 讲解，Next.js 章节讨论 App Router，不能把两边 API 直接互换。
每章都有一个具体问题、可观察的行为、容易踩的坑和练习。标为“片段”或“草图”的代码需要所在章节说明的上下文；完整可运行的双框架例子放在仓库 examples/frontend，入口说明在实战章。代码中的 /api/articles 是教学契约，不宣称本网站已经提供这个接口。
怎么算真的学会
给自己做三次小验收。第一回，刷新后搜索条件还在，返回键行为合理。第二回，故意让旧请求晚于新请求返回，页面仍显示新结果。第三回，不看教程，解释“为什么这个状态放在这里”。能做到这些，比背完生命周期名称更有用。
建议准备一本故障笔记，按“现象—猜想—证据—修复”记录。别写“React 很玄学”，改写为“定时器读取了创建它那次渲染的 search 值”。句子写具体了，问题常常就解开了一半。
阅读依据
完全零基础的六课起步
新增“从网页基础开始”分区应放在其他架构课前阅读。第一课解释 HTML、CSS、JavaScript、Vue 和 React 各自是什么、为什么不能互相替代；第二课写完整 HTML；第三课写 CSS；第四课用原生 JavaScript 做搜索；第五、六课分别用 Vue 和 React 重做同一功能。
每课都给出操作位置、完整代码、逐段解释、预期结果和练习答案。前三课不要求安装框架，原生搜索页可以直接打开；进入框架时再认识 Node、npm、Vite、入口文件和根组件。这样每增加一个工具，你都知道它解决了什么问题。
第一轮的验收是能从空白文件写出文章列表、搜索和空状态。第二轮再读响应式、Hooks、组件边界和路由。第三轮引入网络、权限、测试和部署。不要把一次看完全部章节作为目标，自己改一个需求并解释它，比读过更多标题更有意义。