前端学习路线

前言

写博客是把自己学到的知识沉淀并分享给别人的好方法。本文模仿项目中的风格，给出一套清晰的前端学习路线，适用于刚入门的同学，也适合想系统提升的开发者。

为什么需要一条明确的学习路线

前端技术栈庞杂，工具和框架迭代快。如果没有系统性的学习计划，容易在碎片化的资料中迷失，不知下一步该学什么。一个合理的路线能帮助你建立知识体系、提升可迁移能力，并且尽早能做出完整的项目。

学习路线总览

• 阶段 0：准备 (工具, 英语, 开发环境)
• 阶段 1：基础前端三剑客 (HTML/CSS/JavaScript)
• 阶段 2：前端三件套 (框架, 路由, 状态管理)
• 阶段 3：进阶 (TypeScript, 构建工具, 性能, 无障碍)
• 阶段 4：全栈与工程化 (后端基础, 部署, 测试)
• 阶段 5：项目驱动学习与实习面试准备

下面逐步展开每个阶段的推荐内容与练习方式。

阶段 0：准备

• 安装并熟练使用一套编辑器 (VS Code 推荐) 和常用插件 (格式化, ESLint, vue(official)).
• 学习使用 Git 与 GitHub，掌握基本的 push、分支与 Pull Request 流程。
• 提升阅读英文文档的能力，前端优秀资源大多以英文为主。

阶段 1：基础 (约 1–2 个月)

• HTML: 语义化标签, 表单, 可访问性 (ARIA) 基础.
• CSS: 盒模型, Flexbox, Grid, 响应式设计, 常见布局技巧.
• JavaScript: 语法, 闭包, 原型链, 异步 (Promise, async/await), 模块化.

练习：实现若干静态页面（登录页、博客列表页、卡片布局），并尝试移动端适配。

阶段 2：前端三件套 (约 1–3 个月)

• 框架: Vue 3 (或 React/Angular, 视团队与个人喜好). 掌握组件, 组合式 API (Vue 的 script setup), 生命周期, Props/Emit.
• 路由: 客户端路由的使用与懒加载 (例如 Vue Router).
• 状态管理: Pinia (Vue) 或 Redux (React) 的基本模式与实践.

练习：基于框架实现一个小型应用（Todo、简单博客、记账工具），包含路由和状态管理。

阶段 3：进阶 (约 2–4 个月)

• TypeScript: 类型系统, 泛型, 声明文件 (.d.ts), 与现有 JS 项目迁移技巧.
• 构建工具: Vite / Webpack / Rollup 的基础配置与性能优化思路.
• CSS 工具: TailwindCSS, 预处理器 (Sass/LESS), CSS Modules.
• 性能与可访问性: 懒加载, code-splitting, 图片优化, 无障碍 (a11y) 最佳实践.

练习：给已有项目引入 TypeScript，做一次性能审计并逐项优化。

阶段 4：全栈与工程化 (约 2–4 个月)

• 后端基础: RESTful API, GraphQL, 基础数据库 (Postgres, MongoDB) 概念.
• 部署: Docker, CI/CD (GitHub Actions), 托管平台 (Vercel, Netlify, 云主机).
• 测试: 单元测试 (Vitest/Jest), 端到端测试 (Cypress).
• 监控与日志: Sentry, 性能监控 (Lighthouse).

练习：把应用后端作为简单服务部署，使用 GitHub Actions 做自动化部署。

阶段 5：项目驱动学习与面试准备

• 用项目驱动: 选择一个中等复杂度的项目 (支持用户登录, 数据持久化, 文件上传, 搜索/筛选), 把学习的技术整合进来.
• 写技术博客与读源码: 把你遇到的问题记录成文章, 帮助他人也帮助自己.
• 面试题训练: 算法基础, 网络/浏览器原理, 系统设计的简要理解.

学习建议

• 输出优先于输入: 能把学到的知识写成文章或实现成项目, 才算真正掌握.
• 定期复盘: 每 2–4 周总结学习进度, 调整计划.
• 社区与开源: 参与讨论, PR, 能快速提升工程能力.

参考资源（部分）

• MDN (HTML/CSS/JS)
• Vue 官方文档 / React 官方文档
• Vite, Tailwind, TypeScript 官方指南

学习路线图

⬇️ 下载