前端工程师转型偏前端 AI 全栈开发工程师学习路径

1. 目标岗位画像

偏前端的 AI 全栈开发工程师，不是以训练模型为主，而是把 AI 能力做成真实可用产品的人。

核心能力组合：

• 能设计复杂 AI 产品交互：流式输出、引用来源、工具调用状态、人工确认、失败重试。
• 能用 Vue 3、TypeScript、Vite、Tailwind、Nuxt 构建现代前端应用。
• 能用 Node.js、NestJS、Prisma、PostgreSQL/MySQL/MongoDB 交付业务后端。
• 能理解 Redis 缓存、队列、限流、锁、实时状态。
• 能用 Python、LangChain、LangGraph 实现 RAG、Agent、工作流编排。
• 能用 Docker、Nginx、Monorepo 完成工程化交付。
• 能在企业环境中理解 Java、Spring、MyBatis 的接口和业务系统边界。

一句话定位：

懂前端体验 + 懂全栈工程 + 懂 AI 应用落地 + 能把复杂能力产品化。

2. 总体技术主线

JavaScript / TypeScript
        |
        v
Vue 3 / Vite / Tailwind / Nuxt
        |
        v
Node.js / NestJS / Prisma
        |
        v
PostgreSQL / MySQL / MongoDB / Redis
        |
        v
Python / LangChain / RAG
        |
        v
LangGraph / Agent Workflow
        |
        v
Docker / Nginx / Monorepo / Production Delivery

3. 阶段路线

阶段	时间建议	目标	对应项目
1. 现代前端地基	2-3 周	JS 深入、TypeScript、Vue 3、Vite	01 AI Prompt 工作台
2. UI 工程和设计系统	2-3 周	Tailwind、组件抽象、响应式、多状态 UI	02 AI 产品组件工作室
3. Node 全栈后端	4-5 周	NestJS、Prisma、PostgreSQL、鉴权、接口设计	03 AI 任务管理平台
4. AI 应用基础	4-5 周	Python、LangChain、RAG、知识库、引用来源	04 RAG 个人知识库
5. Agent 工作流	4-6 周	LangGraph、状态机、工具调用、Redis 实时状态	05 Agent 工作流编排台
6. 企业后端增强	3-4 周	Spring、MyBatis、企业权限、审计、报表	06 企业 AI 助手控制台
7. 工程化交付	3-4 周	Monorepo、Docker、Nginx、部署、作品集包装	07 AI 产品运营中台

总周期建议：22-30 周。已有 Vue/JS 基础较好时，可压缩到 16-20 周。

4. 每阶段学习重点

阶段 1：现代前端地基

主攻资料：

• JavaScript系统学习文档.md
• JavaScript系统学习文档-深入详解篇.md
• 正则表达式系统学习文档.md
• TypeScript系统学习文档.md
• Vue系统学习文档.md
• Vue系统学习文档-深度剖析篇.md
• Vite系统学习文档.md

达标要求：

• 能用 Composition API 拆分状态和副作用。
• 能给 API 响应、表单、组件 props 建模。
• 能处理异步、Promise、事件循环相关问题。
• 能搭建 Vite + Vue 3 + TS 项目。

阶段 2：UI 工程和设计系统

主攻资料：

• Tailwind CSS系统学习文档.md
• Vue多端适配方案与实施指南.md
• Vue2与Vue3项目env文件学习文档.md
• vue.config.js系统学习文档.md
• Nuxt系统学习文档.md

达标要求：

• 能把设计稿拆成组件、状态、布局、数据结构。
• 能处理桌面端和移动端布局。
• 能抽象 Button、Input、Card、Table、Modal、Timeline、Chat 等组件。
• 能处理 loading、empty、error、disabled、streaming 等状态。

阶段 3：Node 全栈后端

主攻资料：

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

达标要求：

• 能设计 REST API。
• 能写 DTO、Pipe、Guard、Interceptor。
• 能用 Prisma 做模型、迁移、查询。
• 能做用户、组织、项目、任务、权限等基础业务模型。

阶段 4：AI 应用基础

主攻资料：

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

达标要求：

• 能理解 Prompt、Message、Model、Tool、Retriever、Chain。
• 能构建文档上传、切分、向量化、检索、回答生成流程。
• 能在前端展示引用来源、置信度、追问建议。

阶段 5：Agent 工作流

主攻资料：

• LangGraph系统学习文档.md
• LangChain系统学习文档.md
• Redis系统学习文档.md
• Node.js系统学习文档.md

达标要求：

• 能把 AI 任务拆成节点、边、状态。
• 能展示 Agent 执行过程，而不只是展示最终答案。
• 能处理工具调用、人工确认、失败重试、恢复执行。
• 能用 Redis 做缓存、限流、任务状态、Stream 消息。

阶段 6：企业后端增强

主攻资料：

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

达标要求：

• 能读懂 Java/Spring 企业服务。
• 能理解 Controller、Service、Mapper、事务、缓存。
• 能在前端和 Java 后端之间做接口联调。
• 能给企业 AI 系统设计权限、审计、报表。

阶段 7：工程化交付

主攻资料：

• Monorepo系统学习文档.md
• Docker系统学习文档.md
• 前端Nginx部署项目方法详解.md
• 流式处理与实时通信系统学习文档.md
• SSE服务端事件推送系统学习文档.md
• Webpack系统学习文档.md
• Vite系统学习文档.md
• 高级前端工程师面试题大全.md

达标要求：

• 能组织前端、后端、AI 服务为 Monorepo。
• 能用 Docker Compose 启动前端、API、AI 服务、数据库、Redis。
• 能配置 Nginx 反向代理和 SPA history 路由。
• 能把项目包装成可演示、可讲述、可面试的作品集。

5. 项目递进关系

项目	主要证明能力	面试价值
01 AI Prompt 工作台	TS、Vue、Vite、流式 UI 基础	证明现代前端基础
02 AI 产品组件工作室	设计系统、复杂组件、多状态	证明偏前端优势
03 AI 任务管理平台	NestJS、Prisma、数据库、鉴权	证明全栈能力
04 RAG 个人知识库	LangChain、RAG、引用来源	证明 AI 应用落地
05 Agent 工作流编排台	LangGraph、工具调用、状态机	证明高级 AI 产品能力
06 企业 AI 助手控制台	Java/Spring/MyBatis/权限审计	证明企业项目适配能力
07 AI 产品运营中台	工程化、部署、作品集整合	证明完整交付能力

6. 每个项目的交付标准

每个练习项目都至少交付：

• 一份需求文档。
• 一份前端设计稿。
• 一个可运行前端页面。
• 一个 README。
• 一组 mock 数据。
• 一组接口契约。
• 一篇项目复盘。

第 3 个项目开始必须有后端接口；第 4 个项目开始必须有 AI 调用；第 5 个项目开始必须展示 AI 执行过程；第 7 个项目必须能部署演示。