很多前端同学做过的「接 AI」练习，其实是把输入框里的字拼成一段 JSON，POST 出去，等三秒，整段答案一次性糊在页面上。跑得通，但和真正能用的产品差着一截：回答是整块蹦出来的，不能边生成边看；模型返回的 Markdown 表格和代码块原样显示成星号和反引号；接口偶尔超时，页面除了转圈没有别的反馈。这门课要补的，就是这段从「能调通」到「像个产品」之间的缺口。

先说清楚：哪些东西是缺的

如果只是照抄一段请求代码，难点其实不在 Vue。真正卡人的地方集中在几处：一是流式返回，HTTP 响应是一段一段来的，浏览器不刷新就看不到中间结果，需要边接收边拼接、边触发视图更新；二是请求方式的选择，axios 在浏览器端拿不到流式响应体，要靠 fetch 配合读取器逐块解析，什么时候用哪个、为什么换，很多人说不清；三是渲染，模型输出的代码块得高亮、表格得成行、列表得有序号，直接把字符串丢进 v-html 既不安全也不好看；四是消息列表的状态管理，一轮对话里谁在等待、谁已完成、上下文怎么带着历史一起发出去，写起来比想象中琐碎。

再来是接口侧的门槛。注册、拿到 key、把 key 放进本地环境变量而不是硬编码进仓库，这几步看着简单，第一次做往往要折腾一阵。课程里会把申请流程走一遍，省得你在文档里翻来翻去。

这门课会带你动手的部分

用 Vue3 把聊天界面的布局和逻辑搭起来：输入区、消息区、发送与中断、自动滚到底部。
接入接口并完成密钥申请，把配置和业务代码分开。
对比 axios 与 fetch 两种请求写法，把普通一次性返回改造成流式读取，处理分块数据拼接和结束判断。
接入 Markdown 渲染与代码高亮，让代码块带语言标识正常显示，而不是一片灰。
把上面几块拼成一条能持续对话的链路，而不是一次性的问答玩具。

看的时候建议这样练

不要等视频看完再动手。每讲到一个环节，先自己写一遍，写不出来再回去看。流式那部分尤其建议放慢：手动在控制台打印每次收到的数据块，观察它长什么样、什么时候结束、截断的 JSON 怎么处理。渲染部分可以拿一段带代码块和表格的回答当测试用例，反复调样式。另外，把密钥换成环境变量这件事请当成硬性习惯，别图省事写在组件里，将来上传仓库会后悔。

看完你应该能回答这几个问题

为什么浏览器里做流式请求更常用 fetch，axios 卡在哪一步？
分块到达的数据怎么拼接成完整句子，又怎么判断流已经结束？
用户点「停止生成」时，前端该做什么？
模型返回的 Markdown 里混着代码块，怎么渲染才能既高亮又不引入注入风险？
多轮对话时，历史消息以什么形式带进下一次请求？

如果你已经能用 Vue3 写组件、发过普通的异步请求，这门课不会在基础语法上耗时间，它对准的就是上面这些具体卡点。缺哪一块，就重点补哪一块。