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

news/2025/3/15 12:28:30/文章来源:https://www.cnblogs.com/xiaoyan2017/p/18773480

原创新作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

✨项目特性

  1. Vue3+DeepSeek实现流式打字输出效果
  2. 基于Vue3构建,集成DeepSeek,性能更优,对话丝滑流畅
  3. 支持各种代码高亮,方便展示和分享代码片段
  4. 使用vant4组件库,风格统一,时尚大气
  5. 支持移动端+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端)

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/899129.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sections 多列混排

学习点@Reusable 装饰器 WaterFlow瀑布流容器 模块组件 代码讲解效果图@Reusable 装饰器使用场景 @Reusable 是一个在 HarmonyOS ArkTS 中使用的装饰器,主要用于自定义组件的复用。从 API version 10 开始,@Reusable 装饰器得到了支持。它的主要功能是当一个标记为 @Reusable…

后缀数组(SA)学习笔记(倍增算法)

倍增求SA后缀数组是一个非常好的东西。一开始看不出来这个东西有什么用,但是它非常的有用。(以下 \(N\) 为字符串长度) 有了后缀数组,我们就可以在 \(O(N \log N)\) 的时间内:得到所有后缀的字典序关系。(最基本的功能) 求出任意两个子串的最长公共前缀 (LCP)。 求出字符…

Chat2DB 数据库客户端邀请码

推荐一款超好用的AI数据库管理工具Chat2DB,支持22种数据库,包括国产的达梦、OpenGuass、OceanBase、TiDB等,还有非关系型MongoDB、Redis等,快来试试吧! 🔥 官网:https://chat2db-ai.com/ 🔥 邀请码:622888 邀请码介绍:https://docs.chat2db-ai.com/docs/settings/i…

基于Java的全栈入门学习路线

Java全栈JavaSE数据库前端JavaWebSSM框架Linux学完以上可独立开发,下面是微服务协同开发 SpringBootSpringCloudHadoop

latex中如何重复引用已经存在的脚注?

在使用latex写论文的时候,如果要添加一个脚注,可以使用 \footnote{...}如果第二次出现相同内容的脚注,再写一次\footnote{...}会导致出现两个脚注,我们希望两处脚注链接到一处,可以这样写: 第一处脚注添加label: \footnote{...\label{llama3.2}}第二处及之后的脚注直接引…

编译libssh (Windows VS)

1、先编译依赖的zlib 下载地址 zlib Home Site 解压后,文件夹处——鼠标右键——VS Code打开,选择vs编译器,开始自动编译得到build目录 以管理员身份运行VS,打开build目录里的zlib.sln,我需要的是64位的,所以选择如下 ALL_BUILD处生成lib和dll,然后INSTALL处也生成下(自…

【学习笔记】wqs二分

其实写这个主要是想解释一下它的原理,教程、习题什么的网上都有,比如这个。 就拿这题来讲吧。 首先我们画出一个函数 \(f(x)\) 表示 \(s\) 的度恰好为 \(x\) 时,最小生成树的权值和。 当然,这个函数只会取在某一些整点上,我们把它连起来就行了。 然后你会发现它是下凸的(…

在vue2中引用高德地图,外卖骑手的路线规划

参照路径规划-参考手册-地图 JS API 1.4 | 高德地图APIAMap.RidingAMap.Riding骑行路径规划服务,提供起始、终点骑行路线查询服务。用户可以通过自定义回调函数取回并显示查询结果。若服务请求失败,系统将返回错误信息。 相关示例:位置经纬度 + 骑行路线规划-骑行路径规划-示…

软件分析——OBS Studio

课程社区链接:首页 - 2025年春季软件工程(罗杰、任健) - 北京航空航天大学 - 班级博客 - 博客园 (cnblogs.com) 作业要求链接:[I.2] 个人作业:软件案例分析 - 作业 - 2025年春季软件工程(罗杰、任健) - 班级博客 - 博客园 (cnblogs.com) 课程目标:让学生掌握软件开发的…

JDK7-时间类、时间格式化类--java进阶day07

1.Date类:表示时间的类 1.Date常用的构造方法.2.Date常用的成员方法1.getTime:返回从时间原点到对象设定的时间之间的时间2.setTime:将对象的时间设置为setTime里的时间 d3是此刻的时间,被setTime设置为了时间原点2.SimpleDateFormat类:时间格式化类 Date类默认的格式不好看…

RN里遇到初始计算值是一样的,布局位置却不一致的问题

在tabs切换下面的小动画 但在页面上显示确是这样的,只有切换回来一次后才显示正常。计算结果确始终都是7 问了下AI,说是,在RN中,布局计算是异步的。在组件首次渲染时,即使布局事件已经触发并且获取到了layout对象,实际DOM可能还没有完全应用这些尺寸。这会导致第一次动画…

idea安装激活图文详细教程_激活至永久_亲测有效

一、安装 IDEA打开下载好的安装包,按照提示完成安装。 image.png自定义安装路径,我这里安装在了 E:\ 盘下,继续点击下一步按钮: image.png image.png安装完成后,暂时不要启动程序,直接关闭它。三、补丁安装步骤 1. 下载补丁 点击以下链接获取补丁:点击获取补丁文件。htt…