整体分基础三件套 → JS 核心进阶 → 工程化 框架 (Vue/React) → 企业工程化 全栈拓展 → 面试项目拔高 适合零基础转行、在校生按顺序学完可胜任前端开发 / 中高级前端阶段一Web 基础三件套23 周地基必须写大量页面目标能独立还原静态网页、布局兼容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 核心46 周前端灵魂面试重中之重2.1 JS 基础语法变量 var/let/const、数据类型、运算符、判断循环、数组对象、函数、作用域、闭包2.2 DOM BOM页面交互DOM节点增删改查、事件绑定、事件冒泡 / 捕获、事件委托BOMwindow、定时器、location、history、本地存储 localStorage/sessionStorage2.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 指向、垃圾回收、设计模式、手写原生 APIPromise、深拷贝配套实战原生 JS 待办 TodoList电商轮播图、表单校验、倒计时、商品筛选天气预报 AJAX 跨域请求案例阶段三工程化工具 主流框架68 周企业开发标准3.1 必备工程化工具框架前置不学写不了项目Node.js NPM基础命令、包管理、package.json、全局 / 本地包、自定义脚本打包构建工具Webpack入口出口、loader、plugin、热更新、环境区分ViteVue3/React 新项目主流更快优先学Git GitHub/Gitee代码提交、分支、合并、冲突解决浏览器调试、Chrome Performance 性能面板、兼容性处理3.2 框架二选一就业两条路线路线 AVue国内中小企业、外包、后台管理系统最多新手友好Vue2 基础指令 v-if/v-for/v-model、计算属性、侦听器、组件通信、生命周期Vue3现在企业新项目统一 Vue3Composition API setup/ref/reactive/watch/watchEffect组合式函数 hooks、Teleport、Suspense、Fragment配套生态企业必用路由VueRouter 4动态路由、路由守卫、懒加载状态管理Pinia替代 VuexUI 组件库Element Plus / Arco Design / Vant移动端实战后台管理系统权限、菜单、表格分页、文件上传、表单弹窗路线 BReact大厂、中高级、ToC 项目多薪资上限更高JSX 语法、函数组件、类组件、Props、State、生命周期Hooks 全套useState/useEffect/useRef/useMemo/useCallback 自定义 hook路由React Router v6状态管理Redux / Zustand轻量化UI 库Ant Design、MUITypeScript 配合 React 开发3.3 TypeScript现在企业强制要求不可跳过基础类型注解、接口 interface、类型别名、泛型、枚举、联合交叉类型在 Vue3/React 项目中集成 TS写强类型业务组件实战项目写进简历核心Vue3 Vite Element Plus 后台管理系统 功能登录鉴权、动态侧边栏、用户管理、商品 CRUD、分页搜索、文件上传、ECharts 图表移动端商城 H5Vant、适配手机、下拉刷新、购物车阶段四企业高级前端技术 性能优化34 周区分初级 / 中级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、数组方法、发布订阅、虚拟 DOM4. 项目优化复盘梳理项目难点权限控制、大数据表格卡顿、跨域、打包体积过大、首屏慢等解决方案总学习周期参考全天全职学习34 个月 → 初级前端可投递简历业余下班学习69 个月
