🛣️ 前端学习路线图（2025版）
🟢 初级阶段：打好基础（0-3个月）
🎯 目标：掌握网页结构、样式与基本交互
| 模块 |
必学技能 |
🎓 推荐练习 |
| 🧱 HTML |
标签语义、结构嵌套、表单 |
做一个简单登录页 |
| 🎨 CSS |
盒模型、Flex布局、媒体查询、动画 |
响应式网页、简历页 |
| 🔧 JS 基础 |
变量、类型、条件、循环、函数、数组、对象、DOM 操作、事件 |
时钟、小计算器 |
| 🌍 浏览器基础 |
BOM、DOM、调试控制台、网络面板 |
会看 console 和 network |
| 🔗 Git 基础 |
clone、commit、push、分支 |
学会发项目到 GitHub |
🟡 中级阶段：能独立开发项目（3-6个月）
🎯 目标：组件化开发 + 工程能力 + 网络通信
| 模块 |
必学技能 |
🚀 推荐练习 |
| 🧩 JS 深入 |
闭包、this、原型链、事件循环、作用域 |
编写通用函数库 |
| 🎯 DOM 实战 |
classList、事件委托、表单交互、动态渲染 |
任务清单、小商城 |
| 📦 模块化 |
ES Modules、npm、包管理 |
使用 axios、lodash 等库 |
| 🔄 AJAX & fetch |
发送请求、处理 JSON、Promise、async/await |
天气查询、用户列表 |
| 🛠️ 工具链 |
Webpack/Vite、ESLint、Prettier |
配置项目脚手架 |
| 🗂️ 项目目录结构 |
src/components/assets 规范 |
模块化拆分代码 |
| 🔐 安全基础 |
XSS、CSRF、密码加密 |
登录页防注入演示 |
🔵 高级阶段：复杂系统与性能优化（6-12个月）
🎯 目标：掌握框架 + 工程实践 + 优化技巧
| 模块 |
必学技能 |
🚀 推荐练习 |
| 💚 Vue 3 |
组合式 API、响应式原理、组件通信、生命周期 |
todo、后台管理 |
| 🔁 状态管理 |
Pinia、Vuex、Hooks（React） |
跨组件数据共享 |
| 🔃 路由系统 |
Vue Router、懒加载、动态路由 |
实现导航栏、页面跳转 |
| 📦 前端构建 |
Vite、Tree shaking、CDN |
打包优化 |
| 🚀 性能优化 |
懒加载、虚拟滚动、长列表、缓存策略 |
大表格优化案例 |
| 🔐 权限系统 |
登录鉴权、token、路由守卫 |
管理后台权限控制 |
| 📱 移动端适配 |
rem、vw、媒体查询 |
响应式布局 |
🔴 专业级：全链路能力 & 面试准备（12个月+）
🎯 目标：成为工程型开发者，拥有架构思维
| 模块 |
技能点 |
📚 进阶挑战 |
| 🧠 JS 深度 |
事件循环、宏任务/微任务、柯里化、节流防抖、函数式编程 |
手写系列 |
| 📦 设计模式 |
工厂、观察者、发布订阅、单例 |
封装业务组件库 |
| 🔧 TypeScript |
类型系统、接口、泛型、联合类型 |
搭建 ts+vue 项目 |
| 📊 可视化 |
Echarts、Three.js、Canvas |
实时数据大屏、3D地图 |
| ☁️ 全栈能力 |
Node.js、Express、MongoDB、接口设计 |
简易论坛全栈项目 |
| 📈 CI/CD |
自动部署、GitHub Actions、Vercel |
自动化发布项目 |
| 📄 算法题 |
字符串、数组、栈队列、排序 |
LeetCode 基础前端题 |
🧠 建议搭配实战项目（每阶段）
| 项目类型 |
所学体现 |
| 🎨 个人简历网站 |
HTML/CSS 动画 |
| ✅ ToDo 应用 |
JS DOM、事件委托 |
| 🛒 购物车商城 |
Vue/React 状态管理 |
| 📊 数据大屏 |
Echarts + API 联动 |
| 🎥 视频后台管理系统 |
登录权限、分页、懒加载 |
| 🧠 小型博客系统 |
Vue + Node 全栈部署 |
📌 技能图谱（快速脑图）
HTML + CSS + JS 基础
↓
DOM 操作 + 网络请求
↓
Vue / React 框架掌握
↓
组件化 + 路由 + 状态管理
↓
工程化 + 性能优化 + TypeScript
↓
全栈 + 项目实战 + 算法 + 面试
📦 每阶段推荐资料（可选）
| 阶段 |
学习方式 |
| 初级 |
MDN、菜鸟教程、B站黑马/尚硅谷 |
| 中级 |
Vue 官方文档、掘金文章、小实战项目 |
| 高级 |
GitHub 开源项目、三大框架对比分析 |
| 专业 |
参与项目、刷面试题、源码阅读、造轮子 |