飞书知识库/AI/工具分类

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 / 自建

子冥...大约 6 分钟