前端工程师路线
目标：从零基础到可独立交付前端项目。这份路线把本站已收录的前端笔记串成一条可执行的主线——不是知识清单，而是「每个阶段做什么、做到什么程度算过关、用什么项目验收」。
建议用法：每到一个阶段，先读本页对应章节 → 按链接进站内文档学习 → 完成该阶段的「练习与验收」→ 在过程记录里留一篇学习日志。路线中的里程碑项目会贯穿多个阶段，完成后就是你简历上的可演示作品。
全景与学习策略
先建立整体地图：前端工程师日常面对的问题只有三类——把界面画出来、把数据和交互接起来、把工程质量和性能管起来。
| 阶段 | 主题 | 里程碑产出 | 建议周期（每天 2 小时） | 说明 |
|---|---|---|---|---|
| 阶段一 | HTML / CSS / JavaScript 基础与浏览器 | 个人静态博客（响应式、可部署） | 2 个月 | 地基，决定后面能走多远 |
| 阶段二 | 框架实战：Vue 3 或 React 二选一深入 | CRUD 业务应用（含路由/状态/联调/部署） | 3 个月 | 主线框架 + TypeScript 基本盘 |
| 阶段三 | 工程化、性能与质量 | 把阶段二项目做「工程化改造」并发布开源 | 2～3 个月 | 从「能写」到「能上线维护」 |
| 阶段四 | 进阶方向与持续成长 | 一个方向深度作品 + 一篇技术总结 | 持续 | 按兴趣选 1 个方向深耕 |
三条贯穿始终的策略：
- 产出型学习：每阶段必须有可展示、可运行、可被追问的产出，杜绝「只看不写」；
- 文档闭环：每学一个主题，回到本站对应文档做一次整理/补注，让笔记长在自己站点里；
- 留痕复盘：阶段结束在过程记录写日志，用复盘模板沉淀「学会了什么、卡在哪、下次怎么改」。
阶段一：HTML / CSS / JavaScript 基础
本阶段目标：不依赖任何框架，用原生技术做出一个语义良好、适配手机和电脑、有真实交互和网络请求的静态站点。
知识地图
- [ ] HTML：语义化标签、文档结构、表单与输入控件、SEO 与可访问性基础（ARIA 用法，不背全量）
- [ ] CSS：盒模型、文档流与定位、Flex / Grid 两套布局、响应式断点、CSS 变量与层叠机制
- [ ] JavaScript：变量与作用域、闭包、
this绑定规则、原型链、ES 模块、fetch与 HTTP 常识 - [ ] JavaScript 异步：回调 → Promise →
async/await，能说清事件循环与宏/微任务执行顺序 - [ ] 浏览器基础：渲染管线（HTML/CSS → layout → paint）、回流与重绘、DevTools 用法
- [ ] 工具习惯：Git 基本操作、命令行、代码编辑器、MDN 检索
站内文档闭环
- 语言模块 JavaScript 页：原型链 /
this/ 闭包、事件循环与 Promise 异步模型、ES202x 语法速览，配套「手写题」练习 - 样式方案：现代 CSS 特性（嵌套、
@layer、容器查询）、层叠与设计令牌——阶段一只需先读「现代 CSS 特性」前半部分 - 浏览器原理：渲染管线与事件循环精讲，对应知识地图最后一行的原理
- 前端技术领域作为目录，按需翻阅
练习与验收
- 手写三个 JS 基础题并能讲清思路：防抖 / 深拷贝 / 手写
Promise.all（JavaScript 页有同源练习）； - 原生实现一个轮播 + 一个表单校验（含错误态与提交后的加载/成功/失败三态）；
- 跑通一次真实的
fetch请求并把结果渲染到页面（可用公开 API，注意跨域概念）； - 里程碑项目：个人静态博客——不少于 5 个页面的多页站，含响应式导航、文章列表、移动端适配；部署到 GitHub Pages 或 Vercel 并给出可访问 URL。
验收标准：能不看资料回答「这段代码的打印顺序是什么」类事件循环问题；博客在手机宽度下不横向滚动、无未处理的报错。
常见误区：跳过 CSS 直接刷框架；用「背 API」代替「讲原理」；教程代码能跑就过，从不部署——部署环节逼你处理相对路径、构建、域名等真实问题。
阶段二：框架实战（Vue 3 或 React 二选一深入）
本阶段目标：用主流组件化框架独立完成一个带路由、状态管理、联调与部署的完整业务应用。框架只是手段，真正学的是组件化思维与状态管理模型——这也是两个框架切换时真正通用的部分。
为什么先打好阶段一：框架的响应式、虚拟 DOM、事件委托都建立在 JS 基础之上。基础不牢会出现「框架黑盒」：页面能跑但说不清状态为何更新、为何卡顿。
主线框架选择
本站对两条主线都有完整镜像文档，任选其一深入，不要同时双开：
| 维度 | Vue 3 | React |
|---|---|---|
| 站内文档 | Vue 3：官方指南镜像（从这里开始）+ API 参考 + 生态与工具链（Router / Pinia / Vite / Vitest / VueUse） | React：渲染心智模型、Hooks、并发特性、Actions（基于 React 19） |
| 上手特点 | 模板直观、渐进式、组合式 API 统一逻辑 | 全函数式、JSX、Hooks 依赖需要刻意练习 |
| 典型生态 | Vue Router + Pinia | React Router + Zustand / Redux Toolkit |
建议决策：倾向「模板直观、中文生态丰富」选 Vue 3；倾向「函数式风格、想要接近后端思维」选 React。犹豫不决就选 Vue 3——本站侧边栏对 Vue 3 的镜像覆盖最全，遇到问题最有文档可依。语言层面提前并行学 TypeScript 基础，避免后期补课。
知识地图
- [ ] 组件与模板（组件拆分、Props / 事件 / 插槽或 children、组件通信）
- [ ] 状态与响应式（Vue 的
ref/reactive或 React 的useState，理解「状态驱动视图」） - [ ] 生命周期与副作用（Vue 组合式 API 钩子或 React Hooks，重点是依赖与清理）
- [ ] 路由（多页面切换、路由参数、守卫/导航保护）
- [ ] 状态管理（Pinia 或 Zustand：什么时候该用、什么时候不该用）
- [ ] 与后端联调（封装请求、错误与加载态、鉴权 token 携带）
站内文档闭环
- Vue 3 入门 → 模板与响应式 → API 参考（按需查）→ Vue Router 与 Pinia
- React：先通读「渲染心智模型」与「Hooks 正确用法」，这两节能避免 80% 的新手错误
- TypeScript 在工程中的实践：边写框架边引入类型，不追求一步到位
练习与验收
- 把阶段一的静态博客改造成框架版（组件化重构）；
- 里程碑项目：CRUD 业务应用（如待办管理 / 图书管理 / 账单记账），功能基线：列表 + 搜索筛选 + 分页 + 新增/编辑/删除 + 详情 + 路由守卫 + 全局错误与空态处理 + 本地持久化或 mock 接口联调；
- 给项目写 3 条以上的「可复用的自定义 Hook / composable」并说明复用点。
验收标准：能脱稿画出「页面 → 组件树 → 数据流」的关系图；能解释「为什么这里状态更新了但视图没变 / 为什么多渲染了一次」并给出解决（两框架各自的踩坑清单详见 React 踩坑 与 Vue API 文档）；项目已部署。
常见误区：教程项目只增删改查就结束，缺路由守卫、鉴权、错误态；状态全堆全局 store（正确姿势是「本地状态优先」）；不理解组件通信就直接上状态管理库。
阶段三：工程化、性能与质量
本阶段目标：把「能跑」的项目改造成可维护、可测试、可监控、可发布的项目，补齐从开发到上线的完整链条。这是「能不能进团队 / 能不能接商业项目」的分水岭。
知识地图
- [ ] TypeScript 工程化：strict 配置、类型建模、把 API 返回结构写成类型
- [ ] 构建工具：Vite 开发与生产构建、代码分割、环境变量、产物优化
- [ ] 样式体系：设计令牌、主题、原子化 CSS 与 CSS Modules 的取舍
- [ ] 测试：单元测试（Vitest）、组件测试、E2E 冒烟（Playwright）、CI 门禁
- [ ] 性能：Core Web Vitals（LCP / INP / CLS）、资源加载优化、性能体检与监控
- [ ] 安全基线：XSS 防线、敏感信息与密钥红线、依赖供应链安全
- [ ] 工程规范：lint / 提交规范 / 代码评审 / CI/CD 基础、可访问性（a11y）
站内文档闭环
- TypeScript 在工程中的实践：从
strict基线到业务类型建模与 schema 校验 - 构建工具：Vite 的原理与产物控制（按需预构建、代码分割、缓存）
- 样式方案：设计令牌三层模型与 Tailwind / UnoCSS 落地组合
- 测试：测试金字塔、Vitest + Testing Library + Playwright 的完整配比
- 性能优化：以 LCP / INP / CLS 为准绳的优化清单与监控闭环
- 前端安全：XSS 编码上下文、CSP、前端密钥红线（上生产前必读）
- 浏览器原理：用「渲染管线 + 事件循环」解释你在性能页里遇到的每个问题
练习与验收
- 为阶段二项目做一次「工程化改造」：全量 TS + ESLint + 提交规范 + CI 跑测试；
- 补一组单元测试和一条核心链路 E2E（登录 → 列表 → 新增）；
- 用 Lighthouse / RUM 出一份性能体检报告，针对 LCP、CLS、包体积各做一项优化并记录前后数据；
- 对照安全的检查清单自查一遍项目（尤其密钥是否进了前端代码）；
- 里程碑产出：把项目中的一个可复用模块（组件 / composable / 工具函数）发布为 npm 包，或把整个项目开源并写好 README（部署说明、目录结构、开发脚本）。
验收标准：代码评审视角自问「新人拿到仓库能跑起来吗、改需求会踩到类型坑吗」；报告能讲清「指标差在哪、改了什么、收益多少」——这是面试里含金量最高的表达。
常见误区：把测试当任务量（只写能过的用例）；性能优化靠感觉不靠数据；密钥写进前端、依赖不 audit——安全页里的坑基本都在这里。
阶段四：进阶方向与持续成长
本阶段目标：从「通用前端」走向「有标签的前端」。下面四个方向按性价比排序，选 1 个深耕 6～12 个月，其余保持「看得懂、能协作」。
| 方向 | 一句话说明 | 站内起步文档 | 进阶路径示例 |
|---|---|---|---|
| 大型应用与架构 | 多团队协作、代码库膨胀时的组织方案 | 微前端与架构（模块联邦 / 沙箱 / Monorepo） | 主导一次 Monorepo 化或模块拆分 |
| 性能与体验专家 | 把「快」做成可度量、可持续的工程能力 | 性能优化 + 浏览器原理 | 主导首屏与长任务治理，沉淀 RUM 监控 |
| 可视化与图形 | 数据呈现与复杂交互的底层能力 | 本站前端笔记起步后接 Canvas / SVG / WebGL 体系 | 产出图表库或大屏项目并开源 |
| 全栈与内容工程 | SSR / 岛屿架构 / 内容站点延伸 | Astro（岛屿架构、Server Islands）、SvelteKit 全栈能力 | 用内容工程思路做产品站点，接后端路线 |
另外两条长期建议：
- 横向拓宽一次：入门期深入 Vue 或 React 后，建议完整通读另一主线的对照文档，再按需看 Angular（DI + RxJS）、Svelte（编译时）——把「框架」抽象成「范式」，这是 P6 级思维起点；
- 定期输出：每完成一个方向作品，在过程记录写技术总结（含失败复盘，参考复盘），好文章是个人品牌的复利。
跨路线协同
前端工程师不必闭门造车，三条路线的交叉点往往是真正的竞争力：
- 深入服务端：接后端工程师路线——先补 Node.js / NestJS，再按需进数据库/中间件/系统设计；阶段四的「全栈与内容工程」天然需要后端能力；
- 转 AI 应用：接AI 工程师路线——前端出身切入 Prompt / RAG / Agent 有「交互与产品化」优势，先学 PyTorch 与 LLM 原理即可衔接。
常见误区与放弃点自检
对照检查自己是否正在踩坑（每条都是本站踩坑记录的高频主题）：
- [ ] 看教程超过写代码时间，项目永远停留在「跟着敲」；
- [ ] 一套框架没学透就频繁换（Vue ↔ React 反复横跳）；
- [ ] 跳过部署环节，作品只存在本地文件夹；
- [ ] 代码不写注释也不写 README，三个月后自己看不懂；
- [ ] 只写「能跑」的代码，不管类型、错误处理与边界情况；
- [ ] 性能优化靠猜，安全红线靠运气（先读安全再上线）。
附录：路线 × 本站文档速查
| 学习主题 | 站内文档 | 建议阶段 |
|---|---|---|
| JavaScript / 异步 / 手写题 | JavaScript | 一 |
| 现代 CSS / 样式体系 | 样式方案 | 一、三 |
| 浏览器原理 / 事件循环 | 浏览器原理 | 一、三 |
| TypeScript | 语言笔记 → 工程实践 | 二、三 |
| Vue 3 主线 | Vue 3（开始 / API / 生态） | 二、三 |
| React 主线 | React | 二、三 |
| 构建 / 工程 | 构建工具 | 三 |
| 测试 | 测试 | 三 |
| 性能 | 性能优化 | 三、四 |
| 安全 | 前端安全 | 三（上线前） |
| 大型应用架构 | 微前端与架构 | 四 |
| 横向拓宽 | Angular / Svelte / Astro | 四 |
| 过程留痕 | 过程记录（日志模板） | 全程 |
写作规范请参阅学习路径总览。