学习路径

选择角色，查看对应的入门基础、进阶技能、学习资源和阶段目标

🎨

前端开发工程师

构建用户界面，连接用户与数字世界

6-9 个月

学习周期

12-30K

薪资参考

学习阶段

📦 入门基础

HTML/CSS 核心

4-6 周

·语义化 HTML
·盒模型
·Flexbox/Grid
·响应式设计
·CSS 变量

JavaScript 核心

6-8 周

·ES6+ 语法
·数据类型与原型
·函数与闭包
·DOM/事件
·Promise/async
·ES Module

浏览器与网络

2-3 周

·HTTP/HTTPS
·浏览器渲染流程
·缓存策略
·DevTools 调试

⚡ 进阶技能

现代前端框架

组件化开发与状态管理

React 18/19 主线

8-10 周

·JSX 与组件化
·Hooks 全家桶
·状态管理（Zustand/Redux Toolkit）
·React Router v6+
·数据请求（TanStack Query）
·性能优化（memo/lazy/Suspense）

Vue 3（备选）

4-6 周

·组合式 API
·Vue Router 4
·Pinia
·Vite + Vue 工程化

工程化与构建

现代前端工程体系

TypeScript

3-4 周

·类型系统
·接口与泛型
·类型守卫
·React + TS 实践

构建工具

2-3 周

·Vite 配置与优化
·Webpack 概念
·npm/pnpm 包管理
·Monorepo（pnpm workspace）

代码质量

2 周

·ESLint + Prettier
·Husky + lint-staged
·Git Flow 协作
·CI/CD（GitHub Actions）

性能优化

让应用更快更稳

性能指标与优化

3-4 周

·Core Web Vitals（LCP/FID/CLS）
·懒加载与 Code Splitting
·Tree Shaking
·图片/字体优化
·Lighthouse 90+ 评分

跨端开发

一次开发，多端运行

跨端技术

4-6 周

·React Native 基础
·Taro/小程序开发
·Electron 桌面应用
·PWA 离线能力

📚 推荐学习资源

🎯 阶段学习目标

静态页面作品集

⏱ 4-6 周

完成 5 个响应式静态页面

📦 产出：个人作品集网站

交互式应用

⏱ 6-8 周

完成 3-5 个 JS 交互小应用

📦 产出：TODO / 记账本 / 轮播组件

React SPA 项目

⏱ 8-10 周

用 React 完整开发一个 SPA

📦 产出：仿掘金 / 仿 B 站

跨端应用

⏱ 4-6 周

开发可运行的小程序或 RN 应用

📦 产出：跨端应用 + 性能报告

商业级项目

⏱ 6-8 周

完整项目 + 部署 + 简历

📦 产出：可上线项目 + 求职简历

🗺️ 详细学习阶段

HTML/CSS/JS 基础

语义化 HTML、CSS 布局（Flexbox/Grid）、ES6+ 语法、DOM、异步编程

HTML5CSS3FlexboxGridES6+DOMPromise

⏱ 8-10 周

0/12 节点

React 与工程化

React 18/19 全家桶、TypeScript、Vite、ESLint、状态管理

ReactHooksTypeScriptViteZustandTanStack Query

⏱ 8-10 周

0/15 节点

性能优化与跨端

Core Web Vitals、懒加载、Code Splitting、React Native、Taro、PWA

性能LighthouseReact NativeTaroPWA

⏱ 6-8 周

0/10 节点

项目实战与求职

完整商业级项目、部署上线、简历打磨、面试题库

完整项目部署CI/CD简历面试

⏱ 6-8 周

0/8 节点