整体分：基础三件套 → JS 核心进阶 → 工程化 & 框架 (Vue/React) → 企业工程化 & 全栈拓展 → 面试项目拔高 适合零基础转行、在校生，按顺序学完可胜任前端开发 / 中高级前端
阶段一：Web 基础三件套（2～3 周，地基，必须写大量页面）
目标：能独立还原静态网页、布局兼容
1. HTML
- 标签语义化、块级 / 行内元素、表单、多媒体、列表、布局标签 div/header/main/footer
- 规范：HTML5 新特性（canvas、audio/video、localStorage、拖拽、语义标签）
2. CSS
- 基础：选择器、权重、盒模型、浮动、定位、背景、字体
- 现代布局（重点）
- Flex 弹性布局、Grid 网格布局（企业主流）
- 响应式、媒体查询、rem/vw/vh 适配移动端
- 进阶：
- CSS3：圆角、阴影、渐变、动画 animation、过渡 transition
- 预处理器入门：Less / Sass（变量、嵌套、混合、导入）
- 企业规范：reset.css、normalize.css、BEM 命名规范
3. 实战小案例
- 企业官网静态页面、移动端商品列表、登录注册静态页、新闻列表页
阶段二：JavaScript 核心（4～6 周，前端灵魂，面试重中之重）
2.1 JS 基础语法
变量 var/let/const、数据类型、运算符、判断循环、数组对象、函数、作用域、闭包
2.2 DOM & BOM（页面交互）
- DOM：节点增删改查、事件绑定、事件冒泡 / 捕获、事件委托
- BOM：window、定时器、location、history、本地存储 localStorage/sessionStorage
2.3 异步核心（难点高频面试）
同步异步、回调函数、Promise、async/await、微任务宏任务、AJAX、Fetch、Axios 封装
2.4 ES6+ 全套（现代开发必用）
箭头函数、解构赋值、展开运算符、模板字符串、Set/Map、类 class、模块化 import/export、可选链、空值合并
2.5 原生工具能力
- 数组高阶方法：forEach/map/filter/reduce
- 正则表达式、日期处理、防抖节流、深浅拷贝
- 原生封装请求、简单轮播、Tab 切换、倒计时组件
2.6 进阶核心（中高级分水岭）
原型与原型链、执行上下文、this 指向、垃圾回收、设计模式、手写原生 API（Promise、深拷贝）
配套实战
- 原生 JS 待办 TodoList
- 电商轮播图、表单校验、倒计时、商品筛选
- 天气预报 AJAX 跨域请求案例
阶段三：工程化工具 + 主流框架（6～8 周，企业开发标准）
3.1 必备工程化工具（框架前置，不学写不了项目）
- Node.js + NPM
- 基础命令、包管理、package.json、全局 / 本地包、自定义脚本
- 打包构建工具
- Webpack：入口出口、loader、plugin、热更新、环境区分
- Vite（Vue3/React 新项目主流，更快，优先学）
- Git + GitHub/Gitee：代码提交、分支、合并、冲突解决
- 浏览器调试、Chrome Performance 性能面板、兼容性处理
3.2 框架二选一（就业两条路线）
路线 A：Vue（国内中小企业、外包、后台管理系统最多，新手友好）
- Vue2 基础：指令 v-if/v-for/v-model、计算属性、侦听器、组件通信、生命周期
- Vue3（现在企业新项目统一 Vue3）
- Composition API setup/ref/reactive/watch/watchEffect
- 组合式函数 hooks、Teleport、Suspense、Fragment
- 配套生态（企业必用）
- 路由：VueRouter 4（动态路由、路由守卫、懒加载）
- 状态管理：Pinia（替代 Vuex）
- UI 组件库：Element Plus / Arco Design / Vant（移动端）
- 实战：后台管理系统（权限、菜单、表格分页、文件上传、表单弹窗）
路线 B：React（大厂、中高级、ToC 项目多，薪资上限更高）
- JSX 语法、函数组件、类组件、Props、State、生命周期
- Hooks 全套：useState/useEffect/useRef/useMemo/useCallback 自定义 hook
- 路由：React Router v6
- 状态管理：Redux / Zustand（轻量化）
- UI 库：Ant Design、MUI
- TypeScript 配合 React 开发
3.3 TypeScript（现在企业强制要求，不可跳过）
- 基础：类型注解、接口 interface、类型别名、泛型、枚举、联合交叉类型
- 在 Vue3/React 项目中集成 TS，写强类型业务组件
实战项目（写进简历核心）
- Vue3 + Vite + Element Plus 后台管理系统 功能：登录鉴权、动态侧边栏、用户管理、商品 CRUD、分页搜索、文件上传、ECharts 图表
- 移动端商城 H5（Vant、适配手机、下拉刷新、购物车）
阶段四：企业高级前端技术 & 性能优化（3～4 周，区分初级 / 中级）
1. 图表 & 可视化
ECharts、AntV、大屏数据可视化项目
2. 跨端方案（加分项）
- UniApp / Taro：一套代码打包 H5、小程序、App
- 小程序原生开发（微信小程序基础语法、登录、支付、分包）
3. 网络与安全
跨域解决方案（CORS / 代理 / JSONP/Nginx）、Token 登录、JWT、XSS/CSRF 防护
4. 性能优化（面试高频）
- 加载优化：路由懒加载、图片懒加载、CDN、分包、gzip 压缩
- 渲染优化：虚拟列表、防抖节流、减少 DOM 操作、缓存计算结果
- 打包优化：拆包、Tree-Shaking、移除冗余代码
5. 部署运维
Nginx 基础配置、静态资源部署、反向代理、服务器上传打包文件、CI/CD 简单了解
6. CSS 高级工程化
Tailwind CSS、CSS Module、样式隔离
阶段五：全栈拓展 & 面试拔高（求职阶段）
1. 后端基础（前端必懂，便于对接接口）
MySQL 基础、接口文档 Swagger、简单 Node 后端（Express/Koa 写接口）
2. 架构能力
微前端（qiankun）、组件库封装、业务公共 hooks 封装
3. 面试手写题库
手写防抖节流、深浅拷贝、Promise、AJAX、数组方法、发布订阅、虚拟 DOM
4. 项目优化复盘
梳理项目难点：权限控制、大数据表格卡顿、跨域、打包体积过大、首屏慢等解决方案
总学习周期参考
- 全天全职学习：3～4 个月 → 初级前端，可投递简历
- 业余下班学习：6～9 个月
