Web 前端学习路线图
从零到能独立做项目、写实用工具的系统化路径。按阶段推进，每个阶段都有明确的产出目标。
阶段一：夯实基础（4-6 周）
必学核心
- HTML5 语义化 — 结构清晰，利于 SEO 和可访问性
- CSS3 布局 — Flexbox + Grid 是现代布局的基石
- JavaScript 核心 — 原型链、闭包、this、异步模型
- 浏览器工作原理 — 渲染流水线、Event Loop、内存管理
阶段产出
- [ ] 能手写响应式布局，不依赖框架
- [ ] 理解 JS 异步模型，能正确使用 Promise/async
- [ ] 能解释 Event Loop 的执行顺序
阶段二：TypeScript + 现代工具链（2-3 周）
必学核心
- TypeScript 类型系统 — 泛型、工具类型、条件类型
- Vite — 现代前端开发服务器与构建工具
- ESLint + Prettier — 代码规范自动化
阶段产出
- [ ] 能用 TS 写类型安全的工具函数
- [ ] 能配置 Vite 项目，理解 HMR 原理
- [ ] 项目有完整的 lint 规范
阶段三：React 生态（4-6 周）
必学核心
- React Hooks — useState、useEffect、useRef、自定义 Hook
- React Router v6 — 路由管理
- TanStack Query — 服务端状态管理
- Zustand — 客户端状态管理
- Next.js — SSR/SSG 全栈框架
阶段产出
- [ ] 能独立开发 React SPA 项目
- [ ] 理解 Fiber 架构，能做性能优化
- [ ] 能用 Next.js 做全栈应用
阶段四：Vue 生态（3-4 周）
必学核心
- Vue 3 Composition API — setup、ref、reactive、computed
- Vue Router v4 — 路由管理
- Pinia — 状态管理
- Nuxt 3 — 全栈框架
阶段产出
- [ ] 能独立开发 Vue 3 项目
- [ ] 理解响应式原理（Proxy + 依赖追踪）
- [ ] 能用 Nuxt 3 做 SSR 应用
阶段五：Node.js 全栈（3-4 周）
必学核心
- Node.js 核心 — libuv、Stream、模块系统
- NestJS — 企业级后端框架
- Prisma — 类型安全 ORM
- tRPC — 端到端类型安全 API
阶段产出
- [ ] 能独立开发 RESTful API
- [ ] 能用 tRPC + Next.js 做全栈项目
- [ ] 理解 Node.js 事件循环与 Go 的区别
阶段六：工程化与进阶（持续）
进阶方向
- 性能优化 — Core Web Vitals、代码分割、懒加载
- 微前端 — qiankun、Module Federation
- Web Components — 框架无关的组件
- WebAssembly — 高性能计算场景
- CI/CD — GitHub Actions 自动化部署
技术栈选型建议
| 场景 | 推荐技术栈 |
|---|---|
| 企业中后台 | React + TypeScript + Ant Design + TanStack Query |
| 内容型网站 | Next.js / Nuxt 3 + Tailwind CSS |
| 移动端 H5 | Vue 3 + Vant / React + Ant Design Mobile |
| 全栈应用 | Next.js + tRPC + Prisma + PostgreSQL |
| 组件库开发 | Vite + TypeScript + Vitest + Storybook |
| CLI 工具 | Node.js + TypeScript + Commander.js |
学习建议
- 先深度掌握一个框架（React 或 Vue），再横向扩展
- 每个知识点都要动手写代码，不要只看文档
- 做真实项目是最快的学习方式