学习文档知识库

外观

前端转 AI 全栈开发工程师学习路径 2026 ​

适合人群：已有前端开发基础，尤其熟悉 Vue、JavaScript、工程化，希望转向“偏前端的 AI 全栈开发工程师”的学习者。

核心定位：你不是要变成算法工程师，而是要成为能把 AI 能力做成真实产品的人。重点是前端体验、全栈接口、数据与 RAG、Agent 工作流、部署运维和工程化交付。

本路线基于当前文件夹已有学习文档整理，优先复用已有资料，避免重复学习和路线发散。

目录 ​

  1. 目标岗位画像
  2. 当前资料地图
  3. 总体技术主线
  4. 阶段一：现代前端地基
  5. 阶段二：前端工程化和 UI 体系
  6. 阶段三：Node.js 全栈后端
  7. 阶段四：数据库和数据建模
  8. 阶段五：Python AI 工程基础
  9. 阶段六：LangChain、RAG 和 AI 应用
  10. 阶段七：LangGraph 和 Agent 工作流
  11. 阶段八：部署、监控和工程交付
  12. Java/Spring 企业后端增强线
  13. 推荐时间表
  14. 项目里程碑
  15. 面试表达和作品集包装
  16. 最终学习顺序清单

1. 目标岗位画像 ​

偏前端的 AI 全栈开发工程师，核心能力不是“训练大模型”，而是：

  • 能设计 AI 产品交互。
  • 能实现流式聊天、引用来源、工具调用状态、人工审批等复杂 UI。
  • 能写 Node.js/NestJS API。
  • 能使用 PostgreSQL/MySQL/MongoDB 做数据建模。
  • 能用 Prisma 管理数据库访问。
  • 能用 Python/FastAPI 承载 AI 服务。
  • 能用 LangChain 做 RAG 和工具调用。
  • 能用 LangGraph 做复杂 Agent 工作流。
  • 能用 Docker 部署完整项目。
  • 能理解成本、延迟、权限、安全和评估。

一句话：

text
你要成为“懂前端体验 + 懂全栈工程 + 懂 AI 应用落地”的产品型工程师。

不需要优先深入：

  • 大模型训练
  • 深度学习底层数学
  • CUDA
  • 分布式训练
  • 论文复现

这些是算法/模型工程方向，不是你当前最短路径。

2. 当前资料地图 ​

你当前文件夹已经覆盖了很完整的路线。

前端基础和现代化 ​

  • JavaScript系统学习文档.md
  • JavaScript系统学习文档-深入详解篇.md
  • TypeScript系统学习文档.md
  • Vue系统学习文档.md
  • Vue系统学习文档-深度剖析篇.md
  • Nuxt系统学习文档.md
  • Vite系统学习文档.md
  • Webpack系统学习文档.md
  • Tailwind CSS系统学习文档.md

前端工程化和全栈基础 ​

  • Node.js系统学习文档.md
  • NestJS系统学习文档.md
  • 流式处理与实时通信系统学习文档.md
  • SSE服务端事件推送系统学习文档.md
  • Monorepo系统学习文档.md
  • Docker系统学习文档.md
  • 前端Nginx部署项目方法详解.md

数据库和 ORM ​

  • PostgreSQL系统学习文档.md
  • MySQL系统学习文档.md
  • MongoDB系统学习文档.md
  • PostgreSQL、MySQL、MongoDB数据库技术对比学习文档.md
  • Prisma ORM系统学习文档.md

AI 工程和语言扩展 ​

  • Python系统学习文档.md
  • LangChain系统学习文档.md
  • LangGraph系统学习文档.md

Java 企业后端增强 ​

  • Java系统学习文档.md
  • Spring全家桶系统学习文档.md

原有路线和项目参考 ​

  • 前端全栈学习路线_2026.md
  • TypeScript实战项目GitHub地址.md
  • 高级前端工程师面试题大全.md

3. 总体技术主线 ​

推荐主线：

text
JavaScript/TypeScript
  -> Vue3 / Nuxt / Tailwind / Vite
  -> Node.js / NestJS
  -> PostgreSQL / Prisma
  -> Docker / Monorepo
  -> Python / FastAPI
  -> LangChain / RAG
  -> LangGraph / Agent
  -> AI 全栈项目作品集

增强线：

text
Java
  -> Spring Boot
  -> Spring Security / Data JPA
  -> Spring AI
  -> 企业级后端协作能力

为什么 Java/Spring 不放在主线前期：

  • 你当前是前端开发者，转 AI 全栈的最快路径是 TypeScript + Node + Python。
  • AI 生态更偏 Python。
  • 你已有前端基础，先做出 AI 产品作品更重要。
  • Java/Spring 是企业后端增强能力，适合中后期补齐。

4. 阶段一：现代前端地基 ​

目标：

text
把前端能力从“会写页面”升级到“能做复杂 AI 产品前端”。

学习文档：

  • JavaScript系统学习文档.md
  • JavaScript系统学习文档-深入详解篇.md
  • TypeScript系统学习文档.md
  • Vue系统学习文档.md
  • Vue系统学习文档-深度剖析篇.md

重点知识：

  • Promise、async/await
  • Event Loop
  • 模块化
  • TypeScript 类型系统
  • 泛型
  • 联合类型
  • Vue3 Composition API
  • Pinia
  • 组件通信
  • 响应式原理

AI 产品中特别重要：

  • 流式输出状态管理
  • 消息列表渲染
  • AbortController 中断请求
  • Markdown 渲染
  • 代码块高亮
  • 文件上传
  • 大文本展示
  • loading 和 retry 体验

阶段产出：

text
做一个纯前端 AI Chat UI 原型：
- 支持消息列表
- 支持流式打字效果
- 支持停止生成
- 支持 Markdown
- 支持会话列表
- 支持暗色模式

5. 阶段二：前端工程化和 UI 体系 ​

目标：

text
能搭建现代前端项目，并让 AI 产品 UI 专业、稳定、可维护。

学习文档：

  • Vite系统学习文档.md
  • Nuxt系统学习文档.md
  • Tailwind CSS系统学习文档.md
  • Webpack系统学习文档.md
  • Monorepo系统学习文档.md

重点知识：

  • Vite 项目结构
  • 环境变量
  • 构建优化
  • Nuxt SSR/API routes
  • Tailwind 响应式和主题
  • Monorepo apps/packages
  • 共享 UI 包
  • 共享 tsconfig/eslint

AI 产品中特别重要：

  • Chat 页面布局
  • 知识库管理后台
  • 文档上传组件
  • 引用来源卡片
  • 工具调用过程展示
  • Agent 步骤时间线
  • Human-in-the-loop 审批 UI

阶段产出：

text
搭建 ai-workspace monorepo：
apps/web        Nuxt 前端
apps/admin      管理后台
packages/ui     共享组件
packages/config 共享配置

6. 阶段三：Node.js 全栈后端 ​

目标：

text
能写业务 API、鉴权、数据库访问、文件上传和后台服务。

学习文档：

  • Node.js系统学习文档.md
  • NestJS系统学习文档.md
  • 流式处理与实时通信系统学习文档.md
  • SSE服务端事件推送系统学习文档.md
  • Prisma ORM系统学习文档.md

重点知识：

  • Node.js 模块系统
  • HTTP 服务
  • Express/Fastify 基础
  • NestJS Module/Controller/Service
  • SSE、WebSocket、HTTP Stream、AI 流式响应和任务进度推送
  • DTO 和参数校验
  • JWT 认证
  • RBAC 权限
  • 文件上传
  • Swagger/OpenAPI
  • 日志和异常处理

AI 产品中特别重要：

  • 用户系统
  • 会话管理
  • 消息记录
  • 文档上传接口
  • AI 服务转发
  • SSE 流式接口
  • API 鉴权
  • 使用量统计

阶段产出：

text
实现 NestJS API：
- 用户注册登录
- JWT 鉴权
- 创建会话
- 保存消息
- 上传文档
- 调用 Python AI 服务
- SSE 返回模型流式输出

7. 阶段四：数据库和数据建模 ​

目标：

text
能为 AI 产品设计可靠的数据结构，而不是只把数据随便塞进表里。

学习文档：

  • PostgreSQL系统学习文档.md
  • MySQL系统学习文档.md
  • MongoDB系统学习文档.md
  • PostgreSQL、MySQL、MongoDB数据库技术对比学习文档.md
  • Prisma ORM系统学习文档.md

主推选择：

text
PostgreSQL + Prisma

原因：

  • 关系型能力强。
  • 适合用户、会话、权限、文档、消息等核心数据。
  • JSONB 和 pgvector 适合 AI 场景扩展。
  • Prisma 与 TypeScript 全栈配合舒服。

MySQL 学到什么程度：

  • 能看懂常规业务系统。
  • 掌握 InnoDB、索引、事务。
  • 面试和企业项目常见。

MongoDB 学到什么程度：

  • 理解文档模型。
  • 能处理半结构化数据。
  • 知道什么时候不该用 MongoDB。

阶段产出：

text
设计 AI 知识库数据库：
- users
- workspaces
- documents
- document_chunks
- chat_sessions
- messages
- tool_calls
- feedbacks
- audit_logs

8. 阶段五：Python AI 工程基础 ​

目标：

text
能写 Python AI 服务，而不是只会前端调接口。

学习文档：

  • Python系统学习文档.md

重点知识：

  • Python 基础语法
  • venv 虚拟环境
  • pip/pyproject
  • 类型标注
  • pathlib 文件处理
  • JSON 和日志
  • pytest
  • FastAPI
  • Pydantic
  • asyncio/httpx

为什么必须学 Python：

  • AI 生态以 Python 为主。
  • LangChain/LangGraph Python 文档和示例更完整。
  • 向量库、数据处理、模型工具链更丰富。
  • 很多企业会把 AI 服务独立成 Python 微服务。

阶段产出：

text
实现 FastAPI AI 服务：
- /health
- /chat
- /ingest
- /search
- /feedback

9. 阶段六：LangChain、RAG 和 AI 应用 ​

目标：

text
能做一个基于私有知识库回答问题的 AI 应用。

学习文档：

  • LangChain系统学习文档.md
  • Python系统学习文档.md
  • PostgreSQL系统学习文档.md

重点知识：

  • Chat Model
  • Message
  • Prompt
  • Tool
  • Structured Output
  • Document Loader
  • Text Splitter
  • Embedding
  • Vector Store
  • Retriever
  • RAG
  • Streaming

RAG 学习重点：

text
文档导入 -> 切分 -> embedding -> 入库 -> 检索 -> 组装上下文 -> 模型回答 -> 引用来源

阶段产出：

text
个人学习文档 AI 助手：
- 导入当前 E:\学习文档 下的 Markdown
- 针对这些文档问答
- 回答时给出引用文件
- 支持流式输出
- 支持反馈：有用/无用

这会非常贴合你现有资料，而且能形成作品集亮点。

10. 阶段七：LangGraph 和 Agent 工作流 ​

目标：

text
从“问答机器人”升级为“能执行多步骤任务的 Agent 系统”。

学习文档：

  • LangGraph系统学习文档.md
  • LangChain系统学习文档.md

重点知识：

  • State
  • Node
  • Edge
  • Conditional Edge
  • Reducer
  • Command
  • Checkpoint
  • Thread
  • Interrupt
  • Human-in-the-loop
  • Subgraph
  • Durable Execution

前端要重点做：

  • Agent 当前步骤展示
  • 工具调用卡片
  • 审批 UI
  • 失败重试按钮
  • 任务恢复列表
  • 执行日志面板

阶段产出：

text
AI 学习规划 Agent：
- 用户输入目标
- Agent 分析已有文档
- 生成学习计划
- 暂停等待用户确认
- 用户修改计划
- Agent 生成每日任务
- 保存进数据库

11. 阶段八：部署、监控和工程交付 ​

目标：

text
把 AI 全栈项目从本地 demo 变成可部署、可维护的服务。

学习文档：

  • Docker系统学习文档.md
  • 前端Nginx部署项目方法详解.md
  • Monorepo系统学习文档.md

重点知识：

  • Dockerfile
  • Docker Compose
  • Nginx
  • 环境变量
  • 数据库容器
  • 服务编排
  • 日志
  • 健康检查
  • CI/CD

推荐部署架构：

text
Nginx
  -> Nuxt 前端
  -> NestJS API
  -> Python AI Service
  -> PostgreSQL
  -> Redis

阶段产出：

text
docker compose up 一键启动：
- web
- api
- ai-service
- postgres
- redis

12. Java/Spring 企业后端增强线 ​

学习文档：

  • Java系统学习文档.md
  • Spring全家桶系统学习文档.md

定位：

text
不是前期主线，但建议中后期学习。

为什么要学：

  • 大量企业后端仍是 Java/Spring。
  • 很多 AI 项目需要接入已有 Java 业务系统。
  • 面试时 Java/Spring 能拓宽岗位面。
  • Spring AI 正在成为 Java 生态 AI 应用入口。

学习深度建议：

第一层：能读懂项目

  • Java 基础语法
  • 类、接口、泛型
  • Maven
  • Spring Boot 项目结构
  • Controller/Service/Repository

第二层：能开发 API

  • Spring MVC
  • DTO 校验
  • Spring Data JPA/MyBatis
  • 事务
  • 异常处理
  • Swagger

第三层：能参与企业项目

  • Spring Security
  • Redis
  • 消息队列
  • Actuator
  • Docker 部署
  • Spring Cloud 基础

第四层：AI 增强

  • Spring AI
  • RAG
  • Vector Store
  • 与 Python AI 服务协作

学习时机：

text
完成 Node/NestJS + Python/LangChain 主线后，再系统学习 Java/Spring。

如果你所在公司主要是 Java 后端，可以提前学 Spring Boot 基础。

13. 推荐时间表 ​

3 个月冲刺版 ​

第 1-2 周：

  • TypeScript
  • Vue3/Nuxt
  • Tailwind
  • Vite

第 3-4 周：

  • Node.js
  • NestJS
  • Prisma
  • PostgreSQL

第 5-6 周：

  • Docker
  • Monorepo
  • 基础全栈项目

第 7-8 周：

  • Python
  • FastAPI
  • Pydantic

第 9-10 周：

  • LangChain
  • RAG
  • 向量库

第 11-12 周：

  • LangGraph
  • Agent
  • 项目部署和作品集整理

6 个月稳扎稳打版 ​

第 1 个月：现代前端和 TypeScript。

第 2 个月：Nuxt、Tailwind、Vite、工程化。

第 3 个月：Node.js、NestJS、Prisma、PostgreSQL。

第 4 个月：Python、FastAPI、RAG、LangChain。

第 5 个月：LangGraph、Agent、评估、观测、部署。

第 6 个月：Java/Spring 增强、项目打磨、面试准备。

14. 项目里程碑 ​

项目一：AI Chat UI ​

目标：

text
展示前端 AI 产品能力。

技术：

  • Vue/Nuxt
  • Tailwind
  • Markdown 渲染
  • SSE
  • Pinia

功能：

  • 多会话
  • 流式输出
  • 停止生成
  • 重新生成
  • 暗色模式
  • 消息复制

项目二：AI 知识库问答 ​

目标：

text
展示 AI 全栈和 RAG 能力。

技术：

  • Nuxt
  • NestJS
  • Python FastAPI
  • LangChain
  • PostgreSQL/pgvector
  • Docker

功能：

  • 登录
  • 文档上传
  • 文档切分
  • 向量检索
  • RAG 问答
  • 引用来源
  • 用户反馈

项目三：AI Agent 学习规划系统 ​

目标：

text
展示 LangGraph 和复杂工作流能力。

技术：

  • LangGraph
  • LangChain tools
  • PostgreSQL
  • Nuxt
  • NestJS

功能：

  • 读取学习文档目录
  • 分析用户目标
  • 生成学习路线
  • 等待用户确认
  • 修改计划
  • 生成每日任务
  • 保存任务进度

项目四：企业级 AI 后台 ​

目标：

text
展示偏企业级工程能力。

技术：

  • Spring Boot 或 NestJS
  • Spring Security 或 JWT RBAC
  • PostgreSQL
  • Redis
  • Docker
  • AI 服务集成

功能：

  • 用户和角色
  • 知识库权限
  • 审计日志
  • AI 调用统计
  • 成本统计
  • 管理后台

15. 面试表达和作品集包装 ​

你可以这样介绍自己的方向：

text
我原本是前端开发，主要技术栈是 Vue、TypeScript 和工程化。现在转向偏前端的 AI 全栈开发，能独立完成从 AI 产品交互、前端流式 UI、NestJS API、PostgreSQL/Prisma 数据建模，到 Python LangChain/LangGraph AI 服务和 Docker 部署的完整链路。

作品集要突出：

  • 不只是聊天页面。
  • 有 RAG。
  • 有引用来源。
  • 有流式输出。
  • 有用户系统。
  • 有数据库设计。
  • 有 Docker 部署。
  • 有 Agent 状态展示。
  • 有人工审批或任务恢复。
  • 有成本和日志记录。

简历关键词：

  • Vue3
  • Nuxt
  • TypeScript
  • Tailwind CSS
  • Node.js
  • NestJS
  • PostgreSQL
  • Prisma
  • Python
  • FastAPI
  • LangChain
  • LangGraph
  • RAG
  • Agent
  • Docker
  • Monorepo
  • Spring Boot

16. 最终学习顺序清单 ​

最推荐顺序：

text
1. JavaScript 深入
2. TypeScript
3. Vue3 + Nuxt
4. Tailwind CSS
5. Vite / 工程化
6. Node.js
7. NestJS
8. PostgreSQL
9. Prisma ORM
10. Docker
11. Monorepo
12. Python
13. FastAPI / Pydantic
14. LangChain
15. RAG / 向量数据库
16. LangGraph
17. Agent 产品化
18. Java
19. Spring Boot / Spring Security / Spring AI

每天学习建议：

text
60% 做项目
25% 看系统文档
15% 总结和复盘

不要只看文档。每个阶段都要有可运行项目，否则知识会散。

最终目标项目：

text
AI Learning OS

一个面向开发者的 AI 学习系统：
- 导入本地 Markdown 学习文档
- 自动建立知识库
- 支持 RAG 问答
- 支持学习路线生成
- 支持 Agent 拆解每日任务
- 支持用户确认和修改计划
- 支持进度追踪
- 支持 Docker 一键部署

这个项目和你当前文件夹资料高度匹配，是非常适合你的转型作品。

基于 VitePress 构建的个人学习文档知识库

Copyright © 2026