2026 最新！前端 + AI 学习路线图

合适谁？
0 基础想入行前端的人
已经会前端，但想补 AI 能力的人
想从“前端开发”升级到“前端 + AI 全栈工程师”的人
想做自己的 AI 产品（SaaS / 工具站 / 面试系统 / 内容平台）的人
26 年学习和之前最大的区别
核心相同
HTML / CSS / JavaScript
框架（Vue/React）
工程化（构建、打包、部署）
性能优化、项目实战
区别点
Vibe Coding
会描述需求（Prompt / Spec）
会给上下文（代码片段、接口、约束）
会让 AI 分阶段输出（先方案、再代码、再测试）
会审代码（防止生成脏代码）
会验证（测试、日志、回归）
会重构（把 AI 生成代码工程化）
Agent 架构
Node 全栈、数据库、流式输出、日志、监控、评估
Agent 库（LangChain、LangGraph）
工具调用（Tool Calling）
外部上下文（知识库 / 文件 / 搜索）
Agent 生态概念：MCP、RAG、评估等
多步工作流（Agent / Workflow）
学习路线图
1️⃣ Web 基础（0～1）
HTML 基础
语义化标签
表单（input/select/textarea）
媒体（img/video/audio）
可访问性基础（label、aria 基本意识）
CSS 基础
盒模型、定位、层叠
Flex 布局
响应式布局（移动端适配）
动画与过渡
组件级样式组织思路
JavaScript 基础
变量、作用域、this、原型链
异步（Promise / async-await）
DOM / BOM
事件机制
模块化（ESM）
常见 Web API（fetch / storage / URL / File 等）
TypeScript 基础
2️⃣ 前端工程（Vue/React + 工程化）
框架二选一
Vue 路线（更适合很多国内前端同学）
组件化开发
组合式 API（Composition API）
状态管理（Pinia）
路由（Vue Router）
表单、表格、弹窗、上传组件封装
组件通信与复用模式
React 路线（生态更偏全栈/平台化）
JSX
Hooks（useState/useEffect/useMemo/useCallback）
状态管理（Zustand / Redux Toolkit）
React Router
组件设计与抽象
渲染性能优化
工程化
构建工具：Webpack + Vite
项目初始化
环境变量（dev/test/prod）
alias 配置
分包与懒加载
构建分析（包体积）
代理配置
常见插件机制
包管理：Npm + Pnpm
workspace
lockfile
依赖提升/隔离的基本概念
monorepo 项目结构（apps / packages）
CSS 工程：Tailwindcss + 组件体系
Utility-first 思维
主题（颜色 / spacing / typography）
暗黑模式
与组件库配合（Element Plus / Ant Desgin / shadcn ui / Headless UI 等）
自定义组件风格规范
3️⃣ AI 时代前端必修（Vibe Coding 能力）
后台管理系统
登录/权限
列表/筛选/分页
表单校验
上传
图表
国际化（至少做一次）
构建优化（懒加载、分包）
部署（Nginx）
C 端业务项目
移动端 + PC 端
对接三方（微信登录、支付、支付宝、分享、反馈、人类行为验证等）
最好使用 Vite
打包发布（Nginx）
业务组件库
至少 8~12 个组件
发布（npm 私有源也行）
4️⃣ AI 全栈（Node.js / NestJS / 数据库 / SSE）
Vibe Coding
能力 1：需求表达能力
能力 2：上下文组织能力
能力 3：分阶段生成能力
能力 4：审代码能力
能力 5：验证能力
AI 日常工作流
AI 生成需求拆分
你确认架构与边界
AI 写初稿
你审查并重构
AI 补测试
本地跑测试 + 联调
AI 帮你补文档、变更说明、PR 描述
上线后 AI 协助分析日志和回归问题
AI 调用能力
Prompt 设计能力（让 AI 按工程要求输出）
系统设计表达能力（能画流程图、写方案）
质量保障意识（测试、监控、回滚）
成本意识（模型调用不是免费的）
安全意识（不要把敏感数据直接喂给外部模型）
AI 全栈开发
Node 框架：NestJS
Controller / Service / Module
DTO + class-validator
统一响应结构
异常过滤器
拦截器（日志、耗时、包装）
Guard（登录、权限）
文件上传
SSE（流式输出）
队列（异步任务）
Swagger/OpenAPI
数据库
MySQL
MongoDB
流式输出（SSE 、WebSocket）
SSE（推荐优先）
WebSocket（复杂交互时再上）
OpenAI 已经支持 WebSocket 调用，后续其他的大模型也会跟上
前端流式渲染（token 逐步显示）
中断/重试/超时处理
客户端状态机（生成中 / 完成 / 失败）
复杂的实战项目
前端界面（聊天/表单/历史记录）
NestJS API
用户体系（登录）
数据库存储
SSE 流式输出
历史会话
错误重试
基础日志
5️⃣ 前端 + AI 应用工程（RAG / Agent / MCP / 评估）
模型调用基础
Prompt（系统提示 / 用户提示）
温度 / top_p（知道作用即可）
上下文窗口
Tool Calling
Structured Output（结构化输出）
Token 成本与限流
超时与重试策略
RAG（检索增强）
文档清洗
分块（chunking）
向量化
检索（向量检索 + 关键词检索）
重排（rerank）
引用（sources）
评估（回答是否引用正确内容）
MCP（Model Context Protocol）
Host / Client / Server 三方角色
Tool 的注册与调用
Resource 的暴露方式
用户授权流程（不要默认放开）
工具安全（任意代码执行风险）
日志与审计
Agent / Workflow
工作流编排（Workflow）
状态管理（State）
中断恢复（Checkpoint）
人工介入（Human-in-the-loop）
可观测（Trace）
评估（Eval）与观测
离线评估
命中率（知识问答）
结构化输出正确率
幻觉率
响应耗时
成本（token / 请求）
线上观测
每步耗时（检索、重排、生成）
SSE 中断率
工具调用失败率
用户追问率（反映回答质量）
用户满意度
6️⃣ 进阶提升（架构、性能、安全、可维护性、商业化）
架构能力（前端 + AI 项目都需要）
Monorepo（web / admin / server / shared）
分层（UI / service / domain / infra）
API 类型共享（前后端类型统一）
配置中心（环境变量管理）
插件化设计（可扩展）
性能与体验（尤其是 AI 产品）
前端性能
首屏速度（LCP/FCP）
代码分包
图片/资源优化
列表虚拟化
大表格渲染优化
AI 体验性能
首 token 时间（TTFT）
流式渲染节奏
中断恢复体验
结果缓存（相同问题）
模型降级策略（高峰期）
安全与合规（2026 必修）
前端 XSS / CSRF / Token 安全
后端鉴权与限流
Prompt Injection 基础防护
工具调用白名单
敏感信息脱敏
日志审计
用户数据隔离
CI/CD 与上线能力
构建（前端 / 后端）
部署（Nginx / PM2 / Docker）
回滚
环境隔离（dev/staging/prod）
自动化测试接入 CI
技术栈组合方案
Vue 栈（适合国内大部分工作岗位）
前端：Vue3 + TypeScript + Vite + Pinia + Vue Router
样式：Tailwind CSS + 组件库（Element Plus）
后端：NestJS + Node.js
数据库：MongoDB（+ PostgreSQL 可选）
AI：模型 API + SSE + RAG + MCP
测试：Vitest + Playwright
部署：Nginx + PM2 / Docker
工程化：pnpm workspace（monorepo）
React 栈
前端：React + TypeScript + Next.js
样式：Tailwind + shadcn/ui
后端：Next API / NestJS（二选一）
数据库：PostgreSQL + Prisma（或 MongoDB）
AI：模型 API + Tool Calling + Agent Workflow
测试：Playwright + 单测
部署：Vercel / Docker / 自建