deepseek+vue3.5+arco+markdown网页版流式AI聊天问答
半个月之前有发布一篇vite6+deepseek+vant4构建mobile版智能ai对话助手。
https://cloud.tencent.com/developer/article/2505293
这次带来实战原创新作Vue3.5+DeepSeek API+Arco搭建网页版AI流式聊天会话小助手。
deepseek-vue3-webai实现流式打字输出，支持亮色+暗黑模式、各种代码高亮等功能。
实现技术开发工具：Vscode前端框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0大模型框架：DeepSeek-R1 + OpenAI组件库：arco-design^2.57.0 (字节桌面端组件库)状态管理：pinia^3.0.1本地存储：pinia-plugin-persistedstate^4.2.0高亮插件：highlight.js^11.11.1markdown解析：markdown-it项目特征流式响应，基于Vue3+DeepSeek实现逐行打字输出效果采用Vite6构建，接入DeepSeek，性能更优，聊天丝滑流畅支持各种代码高亮，利于展示和分享代码片段使用arco-design组件库，风格统一，美观大气
项目结构目录整个项目使用vite6搭建框架，整合deepseek api实现流式会话功能，采用vue3 setup语法开发。
.env配置文件去deepseek官网申请apikey，替换掉VITE_DEEPSEEK_API_KEY即可快速体验ai功能。
代码语言：actionscript复制# title
VITE_APP_TITLE = 'Vue3-Web-DeepSeek'
# port
VITE_PORT = 3001
# 运行时自动打开浏览器
VITE_OPEN = true
# 开启https
VITE_HTTPS = false
# 是否删除生产环境 console
VITE_DROP_CONSOLE = true
# DeepSeek API配置
# VITE_DEEPSEEK_API_KEY = 替换为你的 API Key
VITE_DEEPSEEK_BASE_URL = https://api.deepseek.com
项目布局模板如下图：整个项目分为侧边栏+顶部导航条+会话区域。
代码语言：actionscript复制
如上图：侧边栏会话列表支持超过高度滚动条显示。
代码语言：actionscript复制
vue3+deepseek对话框代码语言：actionscript复制
vue3对接deepseek代码语言：actionscript复制const completion = await openai.chat.completions.create({
messages: [
{role: 'user', content: editorValue}
],
model: 'deepseek-chat', // deepseek-chat对话模型 deepseek-reasoner推理模型
stream: false, // 流式输出
max_tokens: 8192, // 限制一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
temperature: 0.4, // 严谨采样 越低越严谨(默认1)
})
// 处理返回数据
console.log(completion.choices[0].message.content)处理流式返回结果。
代码语言：actionscript复制// 处理流式输出
let content = ''
for await (const chunk of completion) {
content += chunk.choices[0].delta.content;
chatState.updateSession(uniKey, content)
if(chunk.choices[0].finish_reason == 'stop') {
loading.value = false
}
if(props.reachBottom) {
props.scrollBottom()
}
}flutter3.27+getx仿抖音app商城：https://cloud.tencent.com/developer/article/2493971
Electron32桌面端os系统：https://cloud.tencent.com/developer/article/2449406
electron31+vue3客户端聊天Exe实例：https://cloud.tencent.com/developer/article/2435159
tauri2.0+vue3客户端admin后台系统：https://cloud.tencent.com/developer/article/2458392
uniapp+vue3仿携程预订客房模板：https://cloud.tencent.com/developer/article/2474766
OK，以上就是vue3.5集成deepseek实战智能AI聊天会话的一些知识分享，希望对大家有所帮助！