Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手

从未见如此厚颜无耻 發表於 2025-3-15 12:28:00

Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手

原创新作vue3.5+deepseek+markdown+vant4仿DeepSeek-R1流式输出ai聊天对话。
deepseek-vue3-chat : 实战2025智能大模型ai会话，基于Vue3+Vite6+OpenAI集成接入DeepSeek聊天小助手模板，支持流式打字输出效果、浅色/暗黑主题模式、代码高亮显示、针对移动端+PC端适配处理。
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315110416747-532200101.png">
<blockquote>
Vite8+DeepSeek网页版AI助手|vue3+arco本地web版ai流式打字问答系统
uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板
tauri2.10+deepseek+vite7客户端ai系统|Tauri2+Vue3.5桌面AI程序Exe
flutter3-deepseek流式AI模板|Flutter3.27+Dio+DeepSeeek聊天ai助手
</blockquote>
<h3><img src="https://img2024.cnblogs.com/blog/1289798/202506/1289798-20250625083110146-297151432.png"></h3>
<h3>🐬使用技术</h3>
<ul>
<li>开发工具：VScode</li>
<li>技术框架：Vite^6.2.0+Vue^3.5.13+vue-router^4.5.0</li>
<li>大模型框架：DeepSeek-R1 + OpenAI</li>
<li>UI组件库：Vant^4.9.17 (有赞vue3移动端组件库)</li>
<li>状态管理：pinia^3.0.1</li>
<li>高亮插件：highlight.js^11.11.1</li>
<li>markdown解析：markdown-it</li>
<li>本地缓存：pinia-plugin-persistedstate^4.2.0</li>
</ul>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315111405138-598170330.gif">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315111448935-310631354.gif">
<h3>✨项目特性</h3>
<ol>
<li>Vue3+DeepSeek实现流式打字输出效果</li>
<li>基于Vue3构建，集成DeepSeek，性能更优，对话丝滑流畅</li>
<li>支持各种代码高亮，方便展示和分享代码片段</li>
<li>使用vant4组件库，风格统一，时尚大气</li>
<li>支持移动端+PC端750px像素适配，大屏也有良好体验</li>
</ol>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315114034641-1062318962.gif">
<h3>🛠️项目结构目录</h3>
vue3-deepseek使用 vite6.x 构建项目模板，采用 vue3 setup 语法编码开发。
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315114341324-356704527.png">
<blockquote>
<h4>vue3-deepseek聊天ai对话项目已经同步到我的作品集，感谢大家的鼓励与支持！</h4>
vue3+vite6+deepseek+vant4流式聊天AI对话模板
</blockquote>
<h3>环境变量配置.env</h3>
<div class="cnblogs_code">
<pre># title
VITE_APP_TITLE = 'Vue3-DeepSeek-Chat'

# port 默认http://localhost:5173/
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</pre>
</div>
<h3>入口文件配置main.js</h3>
<div class="cnblogs_code">
<pre>import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'

import Plugins from './plugins'

const app = createApp(App)

app
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')</pre>
</div>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115456309-133509995.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115530905-644854416.png">
<h3>布局模板</h3>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315211624448-1209945226.png">
如上图：页面整体分为顶部导航条+聊天对话区+底部编辑器三个部分。
<div class="cnblogs_code">
<pre><template>
<div class="flexbox flex-col" style="height:100%;">
<Toolbar :title="chatSession?.title" />

<div class="v3ai__scrollview flex1">
 
 <div v-if="chatSession && !isEmpty(chatSession.data)" class="v3ai__chatbot" ref="scrollRef" @scroll="onScroll">
 <div class="v3ai__chatbot-sessions">
 ...
 </div>
 
 <div class="v3ai__scrollbottom flex-c" :class="{'is-bottom': reachBottom}" @click="scrollToBottom"><i class="iconfont ai-arrD"></i></div>
 </div>
 
 <div v-else class="v3ai__chatbot-intro">
 <i class="logo iconfont ai-deepseek"></i>
 <h3 class="name"><span class="txt text-gradient">嗨~ Vue3-DeepSeek</span></h3>
 <p class="desc">你身边的智能小帮手，我可以帮你搜索、答疑、写作，请把你的任务交给我吧~</p>
 <div class="prompt">
 <p class="tip flex-c"><span class="flex1">你可以这样问</span><span class="flex-c" @click="refreshPrompt">换一换<i class="iconfont ai-shuaxin"></i></span></p>
 <ul class="list">
 <li v-for="(item,index) in promptList" :key="index">
 <div class="txt" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}}</div>
 </li>
 </ul>
 </div>
 </div>
</div>


<ChatEditor ref="editorRef" :value="promptValue" :reachBottom="reachBottom" :scrollBottom="scrollToBottom" />
</div>
</template></pre>
</div>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315121153737-1103815794.gif">
<h3>路由配置</h3>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115801428-1154894481.png">
<div class="cnblogs_code">
<pre>/**
* 路由配置
* @author andy
*/

import { createRouter, createWebHashHistory } from 'vue-router'
import { appStore } from '@/pinia/modules/app'

// 批量导入modules路由
const modules = import.meta.glob('./modules/*.js', { eager: true })
const patchRoutes = Object.keys(modules).map(key => modules.default).flat()

const routes = [
// 错误模块
{
path: '/:pathMatch(.*)*',
component: () => import('@views/error/404.vue'),
meta: {
 title: '404 error'
}
},
...patchRoutes
]

const router = createRouter({
history: createWebHashHistory(),
routes
})

// 全局钩子拦截
router.beforeEach((to, from, next) => {
const store = appStore()
if(to?.meta?.isAuth && !store.isLogged) {
next('/login')
}else {
next()
}
})

router.afterEach(() => {
// ...
})

router.onError(error => {
console.warn('Router Error>>', error.message);
})

export default router</pre>
</div>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115915352-1364055923.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115924392-723515158.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115936813-1523547459.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115945745-1410380700.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315115956088-6433701.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120010977-540777232.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120025003-1004813714.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120038162-683983035.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120050208-2086967406.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120102910-778436751.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120119360-1439249219.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120141933-1262958377.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120202678-402516366.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120214409-1302593388.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120236466-1252787301.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120250195-1328024632.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120308015-150011619.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120327969-1439491164.png">
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120346924-67567818.png">
<h3>vue3+pinia状态管理</h3>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315120447072-1620738521.png">
<div class="cnblogs_code">
<pre>/**
* 状态管理 Pinia
* @author andy
*/

import { createPinia } from 'pinia'
// 引入pinia本地持久化存储
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate)

export default pinia</pre>
</div>
vue3和deepseek聊天会话都保存在本地存储中。
<div class="cnblogs_code">
<pre>export const chatStore = defineStore('chat', {
state: () => ({
// 聊天会话记录
sessionId: '',
session: []
}),
getters: {},
actions: {
// 创建新对话
 createSession(ssid) {
 this.sessionId = ssid
 this.session.unshift({
 sessionId: ssid,
 title: '',
 data: []
 })
},

// 新增会话
 addSession(message) {
 // 判断当前会话uuid是否存在，不存在创建新对话
 if(!this.sessionId) {
 const ssid = guid()
 this.createSession(ssid)
 }
 this.session.map(item => {
 if(item.sessionId == this.sessionId) {
 if(!item.title) {
 item.title = message.content
 }
 item.data.push(message)
 }
 })
},

// 更新某一条会话
 updateSession(key, content) {
 this.session.map(item => {
 if(item.sessionId == this.sessionId) {
 if(item.data && !isEmpty(item.data)) {
 item.data.map((it, index) => {
 if(it.key == key) {
 it.content = content
 }
 })
 }
 }
 })
},

// 获取会话
 getSession() {
 return this.session.find(item => item.sessionId == this.sessionId)
},

// 移除会话
 removeSession(ssid) {
 const index = this.session.findIndex(item => item?.sessionId === ssid)
 if(index > -1) {
 this.session.splice(index, 1)
 }
 this.sessionId = ''
},
// 删除某一条会话
 deleteSession(key) {
 this.session.map(item => {
 if(item.sessionId == this.sessionId) {
 if(item.data && !isEmpty(item.data)) {
 item.data.map((it, index) => {
 if(it.key == key) {
 item.data.splice(index, 1)
 }
 })
 }
 }
 })
},

// 清空会话
 clearSession() {
 this.session = []
 this.sessionId = ''
}
},
// 本地持久化存储(默认存储localStorage)
persist: true
/* persist: {
// key: 'chatStore', // 不设置则是默认app
storage: localStorage,
paths: ['ssid', 'sessions'] // 设置缓存键
} */
})</pre>
</div>
<h3>vue3调用deepseek接口</h3>
<ul>
<li>非流式输出</li>
</ul>
<div class="cnblogs_code">
<pre>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.message.content)</pre>
</div>
<ul>
<li>流式输出</li>
</ul>
通过for循环处理流式输出数据。
<div class="cnblogs_code">
<pre>// 处理流式输出
let content = ''
for await (const chunk of completion) {
content += chunk.choices.delta.content;
chatState.updateSession(uniKey, content)
if(chunk.choices.finish_reason == 'stop') {
loading.value = false
}
if(props.reachBottom) {
props.scrollBottom()
}
}</pre>
</div>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315121910715-1798718007.gif">
综上就是vue3+deepseek实战ai对话小助手的一些知识分享，希望对大家有所帮助！感谢大家的阅读与支持~
<h3>electron39-vue3ai电脑端AI模板|electron39+deepseek+vite7聊天ai应用</h3>
<h3>Vite8+DeepSeek网页版AI助手|vue3+arco本地web版ai流式打字问答系统</h3>
<h3>uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板</h3>
附上几个最新实战项目案例
<blockquote>
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
flutter3-winseek客户端AI实例|Flutter3.32+DeepSeek流式ai对话模板Exe
flutter3-trip仿携程酒店预订|Flutter3.27+Getx预约旅游酒店App程序
最新版Flutter3.38+Dart3.10仿写抖音APP直播+短视频+聊天应用程序
Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
</blockquote>
<img src="https://img2024.cnblogs.com/blog/1289798/202503/1289798-20250315122354468-1538948487.gif">
 

</div>
<div id="MySignature" role="contentinfo">
本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310） 
来源：https://www.cnblogs.com/xiaoyan2017/p/18773480

頁: [1]

琼殿技术论坛's Archiver

Vue3-DeepSeek-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手