原创新作vue3.5+deepseek+vant4+vant4仿DeepSeek-R1流式输出ai聊天对话。
deepseek-vue3-chat : 实战2025智能大模型ai会话，基于Vue3+Vite6+OpenAI集成接入DeepSeek聊天小助手模板，支持流式打字输出效果、浅色/暗黑主题模式、代码高亮显示、针对移动端+PC端适配处理。
🐬使用技术
- 开发工具：VScode
- 技术框架：Vite^6.2.0+Vue^3.5.13+vue-router^4.5.0
- 大模型框架：DeepSeek-R1 + OpenAI
- UI组件库：Vant^4.9.17 (有赞vue3移动端组件库)
- 状态管理：pinia^3.0.1
- 高亮插件：highlight.js^11.11.1
- markdown解析：markdown-it
- 本地缓存：pinia-plugin-persistedstate^4.2.0
✨项目特性
- Vue3+DeepSeek实现流式打字输出效果
- 基于Vue3构建，集成DeepSeek，性能更优，对话丝滑流畅
- 支持各种代码高亮，方便展示和分享代码片段
- 使用vant4组件库，风格统一，时尚大气
- 支持移动端+PC端750px像素适配，大屏也有良好体验
🛠️项目结构目录
vue3-deepseek使用 vite6.x 构建项目模板，采用 vue3 setup 语法编码开发。
vue3-deepseek聊天ai对话项目已经同步到我的作品集，感谢大家的鼓励与支持！
vue3+vite6+deepseek+vant4流式聊天AI对话模板
环境变量配置.env
# 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
入口文件配置main.js
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')
布局模板
如上图：页面整体分为顶部导航条+聊天对话区+底部编辑器三个部分。
<template><div class="flexbox flex-col" style="height:100%;"><Toolbar :title="chatSession?.title" /><div class="v3ai__scrollview flex1"><!-- Chat对话 --><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>
路由配置
/*** 路由配置* @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[key].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
vue3+pinia状态管理
/*** 状态管理 Pinia* @author andy*/import { createPinia } from 'pinia' // 引入pinia本地持久化存储 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia() pinia.use(piniaPluginPersistedstate)export default pinia
vue3和deepseek聊天会话都保存在本地存储中。
export const chatStore = defineStore('chat', {state: () => ({// 聊天会话记录sessionId: '',session: []}),getters: {},actions: {// 创建新对话
createSession(ssid) {this.sessionId = ssidthis.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', // 不设置则是默认appstorage: localStorage,paths: ['ssid', 'sessions'] // 设置缓存键} */
})
vue3调用deepseek接口
- 非流式输出
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)
- 流式输出
通过for循环处理流式输出数据。
// 处理流式输出 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()} }
综上就是vue3+deepseek实战ai对话小助手的一些知识分享，希望对大家有所帮助！最后感谢大家的阅读与支持~
附上几个最新实战项目案例
flutter3-trip仿携程酒店预订|Flutter3.27+Getx预约旅游酒店App程序
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Vite5+Electron聊天室|electron31跨平台仿微信EXE客户端|vue3聊天程序
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
flutter3-winchat桌面端聊天实例|Flutter3+Dart3+Getx仿微信Exe程序
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
