前端全栈 + AI 学习路线图 #

从零基础到资深工程师，覆盖前端、后端、AI 四大方向的完整学习路径。

目录 #

• 学习路线总览
• 第一阶段：零基础入门（0-3个月）
• 第二阶段：前端基础（3-6个月）
• 第三阶段：前端进阶（6-12个月）
• 第四阶段：后端能力（12-18个月）
• 第五阶段：AI 前端融合（18-24个月）
• 第六阶段：资深工程师（24个月+）
• 技能检验里程碑
• 推荐学习资源汇总

学习路线总览 #

四大方向 #

学习阶段概览 #

第一阶段：零基础入门（0-3个月） #

目标 #

• 能写静态网页（HTML + CSS）
• 理解网页基本结构
• 会用 Git 管理代码
• 了解 AI 编程助手

学习内容 #

1.1 HTML 基础（2周） #

实战项目：个人简历页面（纯 HTML）

1.2 CSS 基础（3周） #

实战项目：个人主页（HTML + CSS）

1.3 JavaScript 入门（3周） #

实战项目：轮播图、计数器、表单验证

1.4 Git 基础（1周） #

学习资源：Git 官方文档、Pro Git 电子书

1.5 AI 编程助手入门（1周） #

学习重点：

• 学会提问："帮我写一个轮播图组件"
• 学会追问："这段代码为什么报错？"
• 学会优化："如何优化这个函数的性能？"

第二阶段：前端基础（3-6个月） #

目标 #

• 掌握 JavaScript 核心（ES6+）
• 能用 React/Vue 开发 SPA
• 会用 TypeScript 基础
• 能独立开发小型项目

学习内容 #

2.1 JavaScript 进阶（4周） #

2.2 React 基础（6周） #

实战项目：

• Todo List（增删改查）
• 个人博客（React Router）
• 简单管理系统（表格 + 表单）

2.3 TypeScript 基础（3周） #

2.4 CSS 进阶（2周） #

2.5 构建工具入门（2周） #

实战项目：用 Vite + React + TS + Tailwind 搭建项目脚手架

第三阶段：前端进阶（6-12个月） #

目标 #

• 掌握复杂组件开发
• 能做性能优化
• 会用状态管理库
• 能开发中型项目

学习内容 #

3.1 React 进阶（8周） #

3.2 状态管理（4周） #

实战：用 Redux Toolkit 管理电商购物车状态

3.3 网络请求（3周） #

3.4 测试（3周） #

3.5 性能优化（4周） #

3.6 数据可视化（2周） #

实战项目：

• 电商前台（商品列表、购物车、订单流程）
• 数据可视化 Dashboard（图表 + 实时数据）
• 复杂管理系统（表格、表单、权限）

第四阶段：后端能力（12-18个月） #

目标 #

• 能用 Node.js 开发后端 API
• 会用数据库
• 理解 SSR/SSG
• 能独立完成全栈项目

学习内容 #

4.1 Node.js 基础（4周） #

4.2 数据库（6周） #

4.3 API 设计（3周） #

4.4 SSR/SSG（4周） #

实战：用 Next.js 搭建博客（SSG）和用户 Dashboard（CSR）

4.5 部署运维（3周） #

实战项目：

• 全栈博客系统（Next.js + Prisma + PostgreSQL）
• RESTful API 服务（Express + MongoDB + JWT）
• 后台管理系统（前端 + 后端 + 数据库）

第五阶段：AI 前端融合（18-24个月） #

目标 #

• 能集成 LLM 到前端应用
• 会用 AI SDK 开发智能功能
• 理解 AI 产品开发流程
• 能开发 AI 聊天、智能助手等产品

学习内容 #

5.1 AI 编程深度应用（持续） #

技能点：

• 用 AI 重构大型代码库
• 用 AI 写测试代码
• 用 AI 生成文档
• 用 AI 审查代码质量

5.2 Prompt Engineering（3周） #

5.3 LLM API 集成（4周） #

5.4 AI SDK 集成（4周） #

实战：用 Vercel AI SDK 搭建聊天组件

// Vercel AI SDK 示例
import { useChat } from 'ai/react';
 
function Chat() {
  const { messages, input, handleSubmit } = useChat();
  
  return (
    <form onSubmit={handleSubmit}>
      {messages.map(m => (
        <div key={m.id}>{m.role}: {m.content}</div>
      ))}
      <input value={input} onChange={e => setInput(e.target.value)} />
    </form>
  );
}

5.5 AI 前端产品开发（4周） #

5.6 RAG（检索增强生成）（3周） #

实战项目：

• AI 聊天应用（流式输出 + 多轮对话）
• AI 写作助手（Markdown 编辑器 + AI 润色）
• 智能文档搜索（RAG + 向量数据库）
• AI 代码助手（Monaco Editor + LLM）

第六阶段：资深工程师（24个月+） #

目标 #

• 能架构大型前端项目
• 能做深度性能优化
• 能带领团队技术决策
• 能创新 AI 前端应用

学习内容 #

6.1 架构能力 #

6.2 性能优化深度 #

6.3 团队协作 #

6.4 AI 前端创新 #

6.5 持续学习 #

技能检验里程碑 #

3个月里程碑 #

• ✅ 能独立完成静态页面（HTML + CSS）
• ✅ 能用 JS 实现简单交互（轮播图、表单验证）
• ✅ 会用 Git 推送代码到 GitHub
• ✅ 能用 AI 编程助手生成代码

检验项目：个人主页（GitHub Pages 部署）

6个月里程碑 #

• ✅ 能用 React/Vue 开发 SPA
• ✅ 会用 TypeScript 定义类型
• ✅ 会用 Vite 搭建项目
• ✅ 能用 AI 重构代码、生成测试

检验项目：Todo App 或 简单管理系统

12个月里程碑 #

• ✅ 能开发中型前端项目（电商前台）
• ✅ 会用状态管理（Redux/Zustand）
• ✅ 会做性能优化（懒加载、虚拟列表）
• ✅ 能用 React Query 管理数据获取

检验项目：电商前台 + 数据 Dashboard

18个月里程碑 #

• ✅ 能用 Node.js 开发后端 API
• ✅ 会用数据库（MySQL/MongoDB）
• ✅ 理解 SSR/SSG（Next.js）
• ✅ 能独立部署项目（Docker + Nginx）

检验项目：全栈博客系统

24个月里程碑 #

• ✅ 能集成 LLM 到前端应用
• ✅ 会用 AI SDK 开发智能功能
• ✅ 能开发 AI 产品（聊天、助手）
• ✅ 能用 Cursor/Copilot 高效开发

检验项目：AI 聊天应用 或 智能搜索

资深里程碑 #

• ✅ 能架构大型前端项目（微前端、Monorepo）
• ✅ 能做深度性能优化（Web Vitals、Bundle 分析）
• ✅ 能带领团队技术决策
• ✅ 能创新 AI 前端应用

检验项目：带领团队完成大型项目 或 创造 AI 前端产品

推荐学习资源汇总 #

官方文档（必读） #

教程网站 #

视频课程 #

实战平台 #

社区 #

总结 #

核心路径 #

HTML/CSS → JavaScript → React/Vue → TypeScript
    ↓
Node.js + 数据库 → SSR/SSG → 全栈能力
    ↓
AI 编程助手 → Prompt Engineering → LLM API
    ↓
AI SDK → AI 前端产品 → AI Agent
    ↓
架构能力 → 性能优化 → 团队协作 → 资深工程师

学习原则 #

时间分配建议 #

最后更新：2026-03-28