登录2026最新款Vue3+DeepSeek-V3.2+Arco+Markdown网页端流式生成AI Chat
一周左右爆肝迭代研发，最新款vite7.2+vue3接入deepseek api网页版ai系统，完结了！
技术栈
- 开发工具：vscode
- 技术框架：vite^7.2.4+vue^3.5.24+vue-router^4.6.4
- 大模型ai框架：DeepSeek-R1 + OpenAI
- UI组件库：arco-design^2.57.0 (字节桌面端组件库)
- 状态插件：pinia^3.0.4
- 本地存储：pinia-plugin-persistedstate^4.7.1
- 高亮插件：highlight.js^11.11.1
- markdown插件：markdown-it
- katex公式：@mdit/plugin-katex^0.24.1
项目功能性
- 最新框架vite7.x集成deepseek流式生成，效果更丝滑流畅
- 提供暗黑+浅色主题、侧边栏展开/收缩
- 支持丰富Markdown样式，代码高亮/复制/收缩功能
- 支持思考模式DeepSeek-R1
- 支持Katex数学公式
- 支持Mermaid各种甘特图/流程图/类图等图表
项目结构目录
项目环境变量.env
根据自己申请的deepseek apikey替换项目根目录下.env文件里的key即可体验ai流式打字效果。
# 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
公共布局模板
项目整体结构如下图所示：
<script setup>
import Sidebar from '@/layouts/components/sidebar/index.vue'
</script>
<template>
<div class="vu__container">
<div class="vu__layout flexbox flex-col">
<div class="vu__layout-body flex1 flexbox">
<!-- 侧边区域 -->
<Sidebar />
<!-- 主面板区域 -->
<div class="vu__layout-main flex1">
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</div>
</div>
</div>
</div>
</template>
vue3集成deepseek深度思考模式
// 调用deepseek接口
const completion = await openai.chat.completions.create({
// 单一会话
/* messages: [
{role: 'user', content: editorValue}
], */
// 多轮会话
messages: props.multiConversation ? historySession.value : [{role: 'user', content: editorValue}],
// deepseek-chat对话模型 deepseek-reasoner推理模型
model: sessionstate.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
stream: true, // 流式输出
max_tokens: 8192, // 一次请求中模型生成 completion 的最大 token 数(默认使用 4096)
temperature: 0.4, // 严谨采样
})
vue3-deepseek集成katex和mermaid插件
import { katex } from "@mdit/plugin-katex"; // 支持数学公式
import 'katex/dist/katex.min.css'
// 渲染mermaid图表
import { markdownItMermaidPlugin } from '@/components/markdown/plugins/mermaidPlugin'
解析markdown结构
<Markdown
:source="item.content"
:html="true"
:linkify="true"
:typographer="true"
:plugins="[
[katex, {delimiters: 'all'}],
[markdownItMermaidPlugin, { ... }]
]"
@copy="onCopy"
/>
vue3调用deepseek api流式对话
// 调用deepseek接口
const completion = await openai.chat.completions.create({
// 单一会话
// messages: [{role: 'user', content: editorValue}],
// 多轮会话
messages: props.multiConversation ? historySession.value : [{role: 'user', content: editorValue}],
// deepseek-chat对话模型 deepseek-reasoner推理模型
model: sessionstate.thinkingEnabled ? 'deepseek-reasoner' : 'deepseek-chat',
stream: true, // 流式输出
max_tokens: 8192,
temperature: 0.4
})
处理流式生成内容。
for await (const chunk of completion) {
// 检查是否已终止
if(sessionstate.aborted) break
const content = chunk.choices[0]?.delta?.content || ''
// 获取推理内容
const reasoningContent = chunk.choices[0]?.delta?.reasoning_content || ''
if(content || reasoningContent) {
answerText += content
reasoningText += reasoningContent
// 限制更新频率：每100ms最多更新一次
const now = Date.now()
if(now - lastUpdate > 100) {
lastUpdate = now
requestAnimationFrame(() => {
// ...
})
}
}
if(chunk.choices[0]?.finish_reason === 'stop') {
// ...
}
}
2026最新款Vite7+Vue3+DeepSeek-V3.2+Markdown流式输出AI会话
基于uniapp+vue3+deepseek+markdown搭建app版流式输出AI模板
electron38.2-vue3os系统|Vite7+Electron38+Pinia3+ArcoDesign桌面版OS后台管理
基于electron38+vite7+vue3 setup+elementPlus电脑端仿微信/QQ聊天软件
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
自研2025版flutter3.38实战抖音app短视频+聊天+直播商城系统
基于uni-app+vue3+uvui跨三端仿微信app聊天模板【h5+小程序+app】
基于uniapp+vue3+uvue短视频+聊天+直播app系统
基于flutter3.32+window_manager仿macOS/Wins风格桌面os系统
flutter3.27+bitsdojo_window电脑端仿微信Exe应用
自研tauri2.0+vite6.x+vue3+rust+arco-design桌面版os管理系统Tauri2-ViteOS
https://www.theinformation.com/articles/openais-organizational-problems-hurt-chatgpt?rc=qmzset
