2025大模型新作，基于vue3.5+deepseek api+markdown+vant4搭建DeepSeek AI流式输出对话系统Vue3DeepChat。

图片

vue3-deepseek-chat集成了Vue3对接DeepSeek API对话模型。支持代码高亮、本地缓存，支持移动端+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. 基于Vite6构建，集成DeepSeek，性能更优，对话丝滑流畅

  2. 支持各种代码高亮，方便展示和分享代码片段

  3. 使用vant4组件库，风格统一，时尚大气

  4. 支持移动端+PC端750px像素适配，大屏也有良好体验

  5. 流式响应：逐字显示 AI 回复，提供更好的用户体验

图片

配置.env文件

去deepseek申请一个apikey，替换掉.env文件里VITE_DEEPSEEK_API_KEY即可快速体验聊天对话功能。

# titleVITE_APP_TITLE = 'Vue3-DeepSeek-Chat'
# port 默认http://localhost:5173/VITE_PORT = 3001
# 运行时自动打开浏览器VITE_OPEN = true
# 开启httpsVITE_HTTPS = false
# 是否删除生产环境 consoleVITE_DROP_CONSOLE = true
# DeepSeek API配置VITE_DEEPSEEK_API_KEY = 替换为你的 API KeyVITE_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>

图片

图片

图片

图片

状态管理

图片

/** * 状态管理 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 = 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'] // 设置缓存键  } */})

图片

图片

图片

图片

图片

图片

图片

图片

vue3对接deepseek api

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)

处理流式输出返回结果。

// 处理流式输出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对话小助手的一些知识分享，感谢大家的阅读与支持！

 

 如何学习AI大模型？

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；

第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。


👉学会后的收获：👈
• 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；

• 能够利用大模型解决相关实际项目需求： 大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；

• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；

• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。


1.AI大模型学习路线图
2.100套AI大模型商业化落地方案
3.100集大模型视频教程
4.200本大模型PDF书籍
5.LLM面试题合集
6.AI产品经理资源合集

👉获取方式：
😝有需要的小伙伴，可以保存图片到wx扫描二v码免费领取【保证100%免费】🆓

# 人工智能 # AI
Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

Function Calling已经过时 ，MCP才是真正的大模型接口标准

avatar DeepSeek技术社区
cover

DeepSeek在IT运维中的实战应用与价值

avatar DeepSeek技术社区
cover

【GPT前端实用系列】流式请求+渲染内容兼容deepseek返回think思考标签（保姆级别教程）

avatar DeepSeek技术社区