一、AI + 前端 全套学习资源
（一）官方免费文档（首选，永久更新）
-
Vercel AI SDK（前端对接大模型标准库） 官网：https://sdk.vercel.ai/配套 Next.js/React/Vue 示例，原生支持 SSE 流式打字机输出、多模型兼容（OpenAI、DeepSeek、通义千问、Kimi）。👉 必学功能：对话上下文管理、分段输出、中止请求、工具调用 Function Calling。
-
WebGPU + 端侧本地大模型 llama.cpp + llama-web 仓库：https://github.com/ggerganov/llama.cpp纯浏览器离线跑大模型，不用后端 API 密钥，前端独家技术壁垒。
-
**SSE 流式通信原生实现（不用第三方库）**MDN EventSource 文档，掌握原生流式输出，脱离框架也能做 AI 对话页。
（二）B 站免费完整实战教程（可跟着敲）
- 《Next15 + Vercel AI SDK 从零搭建 AI 聊天网页》关键词搜索：Next.js AI SDK 流式对话内容：API 密钥封装、跨域代理、聊天历史持久化、markdown 代码块渲染、加载动画。
- 《Vue3+Nuxt3 接入 DeepSeek，自建 AI 智能客服》适合 Vue 技术栈，后端代理层封装，避免前端暴露密钥。
- 《WebGPU 浏览器本地运行 LLM，离线 AI 应用开发》小众稀缺教程，简历亮点极强。
（三）付费精品实战课（系统化、带完整源码）
- 掘金小册：《前端接入大模型全栈实战》覆盖：密钥安全代理、RAG 知识库前端嵌入、文件上传解析 PDF 问答、AI 生成表单。
- 小册：《SSE+WebSocket AI 流式应用落地》区分两种长链接适用场景：普通对话用 SSE，实时协同用 WS。
（四）现成开源项目（直接 Fork 改造成作品集）
- chatbot-ui：开源 AI 对话网页，React+Next，一键部署
- next-ai-chat：轻量化 AI 聊天模板，可二次定制 UI
- RAG 前端知识库：上传文档→切片→向量检索→回答问题
（五）5 个递进练手项目（按难度排序）
- 基础：AI 打字机效果问答页面（SSE 流式）
- 进阶：带上下文记忆的 AI 聊天框，支持清空历史
- 中阶：AI 代码助手，前端输入需求生成 Vue/React 组件代码
- 高阶：PDF 上传解析，AI 读取文档内容问答（RAG 简易版）
- 壁垒项目：WebGPU 离线本地大模型网页，无需联网调用 API
（六）避坑要点
前端绝对不能直接把大模型密钥写在客户端代码里，必须用 Node/Nest/Nuxt 做一层后端代理转发，教程里都会重点讲解。
二、可视化 & 大屏 全套学习资源
分 2D 图表、关系拓扑图、3D 场景、大屏拖拽平台、WebGIS 四个细分。
（一）权威官方文档（不用买书，足够吃透）
1）2D 图表
- Apache ECharts 官网教程 + 示例：https://echarts.apache.org/内置几百个可复制示例：折线、柱状、饼图、地图、仪表盘、渐变动画、自适应大屏。
- ECharts GL：3D 柱状、3D 地图、迁徙航线，大屏标配。
2）AntV 全家桶（阿里出品，企业中台首选）
- G2：统计图表，替代 ECharts 做精细化分析报表
- G6：关系拓扑图（组织架构、链路拓扑、流程图）
- X6：拖拽式流程图编辑器（低代码画布核心）官网：https://antv.vision/
3）3D 可视化 Three.js
官方文档 + 示例仓库：https://threejs.org/配套中文教程网站：threejs.org/docs/index.html#manual/zh/introduction
4）大屏快速搭建
DataV 官方文档：可视化大屏组件库，开箱即用边框、装饰、轮播数字、飞线。
（二）B 站免费成套实战教程
- 《ECharts 大屏可视化完整教程（自适应 + 布局 + 动画）》完整做一整套驾驶舱大屏，自动适配不同分辨率，解决大屏缩放错乱痛点。
- 《Three.js 3D 城市建模、楼宇高亮、点位标记》智慧城市、园区 3D 场景必备，前端 3D 高薪方向。
- 《X6 拖拽流程图编辑器从零手写》大厂低代码平台刚需，学完能自研画布引擎。
- 《WebGIS 高德 / 百度地图叠加迁徙飞线、点位弹窗》物流、安防、智慧城市项目高频需求。
（三）系统化付费教程推荐
- 掘金小册《ECharts 可视化大屏进阶实战》包含：多图表联动、tooltip 自定义、图例筛选、定时轮播刷新、后端接口数据接入。
- Three.js 经典课程：《Three.js 3D 可视化从入门到项目实战》讲解模型导入 gltf、光照、相机控制、点击拾取、弹窗悬浮。
（四）开源大屏模板（直接二次开发，作品集现成素材）
- datav-vue3：Vue3+DataV 完整大屏模板
- react-data-view：React 版大屏模板
- smart-city-three：Three.js 智慧城市 3D 大屏开源项目
- vue-admin-echarts：后台系统全套图表封装组件库
（五）递进练手项目路线
- 入门：单页面接入接口，做 5 个联动 ECharts 图表
- 初级大屏：1920 分辨率驾驶舱大屏，自适应缩放、数字滚动动画
- 拓扑项目：G6 实现服务调用链路拓扑图，节点拖拽、hover 高亮
- 3D 进阶：Three.js 加载楼宇模型，点击建筑弹出数据面板
- 高阶自研：拖拽式大屏搭建平台（画布 + 组件库 + JSON 配置渲染）
三、学习顺序规划（两个方向并行不冲突）
每日安排（兼顾日常上班）
- 工作日晚间（1.5h）
- 隔天轮换：AI 前端 / 可视化
- 周末整块时间（4--6h）：完整跑完一个实战项目，存入 Github 作品集
推荐先后顺序
- 可视化：ECharts 基础 → 自适应大屏 → G6/X6 → Three.js；见效最快，简历立刻能加项目
- AI 前端：SSE 原生流式 → Vercel AI SDK 封装对话页 → 后端代理安全层 → RAG 知识库 / WebGPU 本地模型
四、配套工具清单
AI 前端
- 框架：Next.js/ Nuxt3
- 接口调试：Apifox
- 模型测试：DeepSeek、通义千问（有免费额度）
可视化大屏
- 布局：flex+grid、rem/scale 大屏自适应方案
- UI：DataV、NaiveUI
- 3D 模型：Blender 导出 gltf 格式，前端直接加载