怎么说呢，

前言

最近在学习 AI Chatbot 的前端开发，花了几天时间从基础开始。用 Vue 调用 DeepSeek API，实现了一个支持流式输出和非流式输出切换的聊天机器人。这篇文章把整个过程记录下来既帮你搞懂 Vue 的主要概念，也带你理解 AI 应用最关键的使用者体验——流式输出。

至于你将会收获，

• Vue 主要概念：组件化、响应式数据、模板语法、双向绑定
• 从二进制流到 JSON 字符串再到 JS 对象的完整数据转换链路
• DeepSeek API 的调用方式
• 用 ReadableStream 实现打字机效果的原理
• 一个可运行的 AI 聊天机器人项目

一、项目跑起来需要啥？其实，

很多新手在启动 Vue 项目时常被文件结构搞糊涂。导致“挂载点没找到”或“组件无法渲染”的报错。 先搞清楚每个文件到底干什么可以省掉不少踩坑时间。 其实，

三个主要文件的分工

index.html → 浏览器入口，提供挂载点 

src/main.js → 创建 Vue 应用，挂载到 #app 上
src/App.vue → 你的第一个组件。
所有业务逻辑在这里

index.html —— 浏览器入口

是整个 Vue 应用的唯一挂载点。它本身是空的，Vue 会把它填满。话说回来，再看类比，墙上的钉子，Vue 应用是一幅画。mount 就是把画挂到钉子上。

Main.js —— 创建并挂载 Vue 应用

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp.mount

createApp 创建了一个 Vue 应用实例。.mount 把它塞进

. 这一步之后#app 内部的世界就由 Vue 组件统治了。

App.vue —— 你的组件

• : HTML 模板，负责页面结构。

---