【前端】成长路线
目录
- 第一阶段：前端基础
- 第二阶段：核心进阶
- 第三阶段：前端框架（Vue / React）
- 第四阶段：工程化 & 实战能力
- 第五阶段：就业准备 & 面试突击
- 链接：划重点
第一阶段：前端基础
- HTML5：语义化标签、表单、音视频、canvas
- CSS3：
布局：Flex、Grid
动画：transition、animation
响应式：媒体查询、rem/vw - JavaScript：
基础语法、函数、对象、数组、DOM/BOM
异步编程（Promise、async/await）
ES6+ 新特性（解构、箭头函数、模块化、展开运算符等）
第二阶段：核心进阶
- 深入理解 JavaScript
作用域 & 闭包
原型与原型链
this、call、apply、bind
深拷贝 / 浅拷贝
事件机制 & 冒泡 / 捕获
模块化（ES Module、CommonJS） - 浏览器原理
DOM 树 / 渲染流程
回流重绘
Event Loop、宏任务 & 微任务
Cookie / LocalStorage / SessionStorage
浏览器缓存机制 - 网络基础
HTTP 协议、HTTPS
请求方法、状态码
跨域与解决方案（CORS、JSONP）
第三阶段：前端框架（Vue / React）
选一种主学，另一种了解
- Vue3 路线
Composition API（setup、ref、reactive）
生命周期钩子
组件通信（props / emit / provide / inject）
路由（Vue Router）
状态管理（Pinia / Vuex）
常用指令（v-for、v-if、v-model） - React 路线
函数组件、Hooks（useState / useEffect / useRef）
组件复用 & Context API
React Router v6
状态管理（Redux Toolkit / Zustand）
组件库（AntD、Material UI）
第四阶段：工程化 & 实战能力
- 开发工具 & 打包工具
npm / pnpm / yarn
Vite / Webpack 基础
Babel、ESLint、Prettier - 项目实战能力
Axios 接口请求封装
响应式设计 / 移动端适配
权限控制（路由守卫、Token 验证）
Git 基础、团队协作流程 - 推荐实战项目
管理后台系统（登录、表格、分页、筛选、CRUD）
电商前台页面（商品页、购物车、支付流程）
第五阶段：就业准备 & 面试突击
- 必会内容
前端性能优化
SSR / SPA 原理
虚拟 DOM、diff 算法
安全性（XSS、CSRF）
前端部署：Nginx、GitHub Pages、Vercel、Netlify - 常见面试题理论&实战
- 项目/简历优化
- 技术选型说明 + 架构图