HTML、CSS、JS、Node.js、Vue、UniApp、React、React Native、NestJS、Next.js、Electron 全部串起来，而且顺序是最合理、最少走弯路的。
一、前端基础阶段（地基，必须扎实）
目标：能独立写静态网页 + 理解浏览器
1️⃣ HTML（1 周）2️⃣ CSS（2–3 周）
学习重点
- 常用标签：
div / span / p / a / img / ul / li - 表单：
input / select / textarea / form - 语义化标签：
header / nav / main / section / footer - SEO 基础概念
- HTML5 新特性（video、audio）
核心内容
-
盒模型、选择器、权重
-
布局：
float（了解）- Flex（重点）
- Grid（进阶）
-
响应式布局（媒体查询）
-
BFC
-
动画：
transition / animation -
预处理器：Sass / Less
视频推荐2025版pink老师最新AI+前端入门教程，零基础必看的html5、css3、grid、flex布局、响应式、移动端，bootstrap5框架，AI工具_哔哩哔哩_bilibili
3️⃣ JavaScript 基础（4–6 周，核心）
前端最重要的一步
基础
- 数据类型、作用域、闭包
- 原型 / 原型链
- this 指向
- ES6+（let、const、箭头函数、解构、Promise）
进阶
-
异步： Promise。 async / await。 事件循环（宏任务 / 微任务）
-
DOM / BOM
-
防抖 & 节流
-
模块化（ESM / CommonJS）
实践
- 原生 JS 写 TodoList
- 封装一个防抖函数
- 手写 Promise（理解即可）
视频推荐黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_哔哩哔哩_bilibili
二、前端工程化 & Node 基础
目标：懂“项目是怎么跑起来的”
4️⃣ Node.js（2–3 周）
核心
- Node 运行机制
- fs / path / http
- Express / Koa
- 中间件原理
- JWT 登录
- 文件上传
- 跨域（CORS）
实践
- 写一个登录注册接口
- 简单 RESTful API
5️⃣ 前端工程化（1–2 周）
必会
- npm / pnpm
- Webpack / Vite（重点 Vite）
- Babel
- ESLint / Prettier
- Git + GitHub
视频推荐黑马程序员前端AJAX入门到实战全套教程，包含学前端框架必会的（ajax+node.js+webpack+git），一套全覆盖_哔哩哔哩_bilibili
三、主流前端框架阶段（重点）
Vue + React 双修，直接拉高上限
6️⃣ Vue（3–4 周）
核心
- Vue3 + Composition API
- 响应式原理（ref / reactive）
- 生命周期
- 组件通信
- Vue Router
- Pinia
- Vite
进阶
- 自定义 Hook
- 性能优化
- 权限路由
实践
- 后台管理系统
- 电商首页 + 购物车
7️⃣ UniApp（1–2 周）
一套代码，多端运行（小程序 / App）
核心
- 生命周期
- 条件编译
- 请求封装
- 小程序登录
实践
- 微信小程序项目
- 多端商城
8️⃣ React（3–4 周）
核心
- JSX
- Hooks（useState / useEffect / useMemo）
- 组件通信
- Context
- React Router
- Zustand / Redux
进阶
- Fiber 原理（理解）
- 性能优化
- 高阶组件
实践
- React 后台系统
- Hooks 封装
四、全栈 & 跨端 & 高级方向
9️⃣ NestJS（2–3 周）
企业级 Node 后端框架
核心
- 模块 / 控制器 / 服务
- DTO
- TypeORM / Prisma
- JWT + 权限
- 拦截器 / 守卫
实践
- 完整后台系统 API
- RBAC 权限系统
🔟 Next.js（2 周）
React + SSR + SEO
核心
- App Router
- SSR / SSG / ISR
- Server Components
- SEO 优化
实践
- 博客系统
- 官网 + SEO
1️⃣1️⃣ React Native（2 周）
原生 App 开发
核心
- RN 组件
- 导航
- 状态管理
- 与原生交互
实践
- 简单移动 App
1️⃣2️⃣ Electron（1–2 周）
桌面应用开发
核心
- 主进程 / 渲染进程
- IPC 通信
- 打包
实践
- 桌面工具（记账 / 笔记）
五、终极提升（面试 & 架构）
- 浏览器原理
- 性能优化
- 网络（HTTP / HTTPS）
- 安全（XSS / CSRF）
- 手写源码（Promise、深拷贝）
- 项目亮点总结
学习顺序总结（重点）
HTML → CSS → JavaScript
→ Node.js → 工程化
→ Vue → UniApp
→ React → Next.js
→ NestJS
→ React Native / Electron
建议学习方式
- 每阶段一个项目
- 边学边记博客
- 不要只看视频
- 项目 > 知识点
如果你愿意，我可以帮你：
- 制定 6 个月 / 1 年学习计划
- 按 就业方向（前端 / 全栈 / 移动端）定制路线
- 给你 每阶段推荐项目 + 面试重点
