前端框架学习路线图

一句话：这条路线用同一个“用户管理后台”案例，把 React 和 Vue 从基础写法、真实业务页面、工程化、生态架构到横向对比串起来。

第 1 篇 / 共 12 篇前端框架主线文章。

本篇学完你会知道：React 和 Vue 应该按什么顺序学、每个阶段练什么、为什么后面 11 篇都围绕同一个案例展开。框架主线之外，还有一篇 pnpm + monorepo + Turborepo 的前端工程化专题，适合在理解项目结构后再看。

1. 这套前端路线解决什么问题

很多人学 React 和 Vue 时会遇到一个问题：每个知识点都好像懂了，但一到真实页面就不知道从哪里下手。

比如你会写：

const [count, setCount] = useState(0);

也会写：

const count = ref(0);

但真实工作里要做的是：

用户列表
搜索筛选
新增用户
编辑用户
删除确认
接口请求
loading 和 error
路由跳转
权限控制
全局状态
目录拆分

所以这套文章不是只讲语法，而是用同一个后台页面，把语法放进真实任务里。

2. 统一实战案例是什么

整个系列使用同一个案例：用户管理后台页面。

它包含这些功能：

后面的 React 篇和 Vue 篇都会反复回到这个案例。这样你不是背两套概念，而是在比较两套框架如何解决同一个问题。

3. React 线怎么学

React 线以 React 19 + Hooks + TypeScript + React Router + 状态管理 + 工程化 为基准。

建议顺序：

1. 大白话讲解——React 入门篇：组件 JSX Props State.md
2. 大白话讲解——React 核心篇：Hooks 表单 请求 用户列表.md
3. 大白话讲解——React 进阶篇：路由 状态管理 权限 工程化.md

React 的核心心智模型是：

UI = 函数组件(props, state)

你把数据准备好，React 根据数据重新算出界面。

4. Vue 线怎么学

Vue 线以 Vue 3.5 + script setup + Composition API + TypeScript + Vue Router + Pinia + 工程化 为基准。

建议顺序：

1. 大白话讲解——Vue 入门篇：模板 指令 组件 响应式.md
2. 大白话讲解——Vue 核心篇：Composition API 表单 请求 用户列表.md
3. 大白话讲解——Vue 进阶篇：Router Pinia 权限 工程化.md

Vue 的核心心智模型是：

模板绑定响应式数据
数据变了，模板自动更新

你更像是在写一份“页面说明书”，Vue 帮你追踪哪些数据被页面用到了。

5. 生态和横向对比线怎么学

对比线不是争谁更好，而是回答真实问题：

同一个用户管理页面，React 会怎么组织？
同一个用户管理页面，Vue 会怎么组织？
我在公司项目里该怎么选？
如果我已经会一个，怎么迁移到另一个？

建议顺序：

1. 大白话讲解——React vs Vue 心智模型对比.md
2. 大白话讲解——React vs Vue 真实开发任务对比.md
3. 大白话讲解——React 生态全景与项目架构.md
4. 大白话讲解——Vue 生态全景与项目架构.md
5. 大白话讲解——React vs Vue 生态架构横向对比.md

如果你已经开始维护多个前端项目，再补一篇工程化专题：大白话讲解——pnpm + monorepo + Turborepo 管理多项目.md。它不属于 React/Vue 语法主线，讲的是多个项目、共享包和构建任务怎么管理。

6. 学习前需要会什么

最低需要：

如果你还不熟 HTTP，可以先看：大白话讲解——HTTP JSON REST API 大白话.md。

7. 每一篇的产出

8. 常见误区

误区一：先背 API，再做项目

API 很多，背不完。更好的方式是：

做用户列表时学列表渲染
做搜索时学表单状态
做弹窗时学组件通信
做接口时学请求和错误处理

误区二：React 和 Vue 一起从零乱学

如果你完全没基础，建议先完整学一条线，再看对比。否则会把 JSX、模板、Hooks、Composition API 混在一起。

误区三：把状态管理学成玄学

状态管理本质很简单：哪些数据要被多个地方共享，就集中管理。比如当前登录用户、权限、主题、筛选条件。

9. 推荐学习节奏

如果你想快速入门：

路线图 -> React 入门 -> React 核心 -> Vue 入门 -> Vue 核心 -> 任务对比

如果你想系统掌握：

路线图 -> React 三篇 -> Vue 三篇 -> 对比两篇 -> 生态三篇

如果你已经会 Vue，想补 React：

React 入门 -> React 核心 -> React 进阶 -> 心智模型对比 -> 任务对比

如果你已经会 React，想补 Vue：

Vue 入门 -> Vue 核心 -> Vue 进阶 -> 心智模型对比 -> 任务对比

最后总结

下一篇建议：大白话讲解——React 入门篇：组件 JSX Props State.md