2025实战AI新作-基于vue3.5+vite6+deepseek-v3+arco搭建一款仿deepseek/豆包流式ai模板
支持流式打字输出效果、浅色/暗黑主题模式、代码高亮显示、针对移动端+PC端适配处理。
使用技术
- 技术框架：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，性能更优，对话丝滑流畅
- 支持各种代码高亮，方便展示和分享代码片段
- 流式响应：逐字显示 AI 回复，提供更好的用户体验
- 优雅的 UI 设计：
气泡式对话界面
打字机效果
平滑的动画过渡
响应式布局
项目结构目录
入口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>
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)
综上就是vue3+deepseek-v3实战智能ai聊天会话的一些分享，希望对大家有所帮助~
