DeepSeek为什么超越了OpenAI?
2025年AI实战deepseek-v3+vite6打造专属网页AI版流式多轮会话系统。
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果 - xiaoyan2017 - 博客园
vue3ai-webseek 整合 Vue3.5 接入 DeepSeek-V3 API 对话大模型。支持上下文多轮会话、代码高亮、本地缓存，图片生成等功能。
运用技术
- 开发工具：VScode
- 前端框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0
- 大模型ai框架：DeepSeek-V3 + OpenAI
- 组件库：arco-design^2.57.0 (字节桌面端组件库)
- 状态管理：pinia^3.0.1
- 本地存储：pinia-plugin-persistedstate^4.2.0
- 高亮插件：highlight.js^11.11.1
- markdown解析：markdown-it
项目亮点
- 流式响应，实现类似deepseek/豆包逐行打字输出效果
- 基于Vite6构建，接入DeepSeek-V3，性能更优，对话丝滑流畅
- 支持上下文多轮对话、代码高亮效果，利于展示和分享代码片段
- 使用arco.design组件库，风格统一，美观大气
- 支持暗黑+亮色主题模式
目前vue3-webseek-ai项目已经同步到我的作品小店，感谢大家的支持！
Vue3+DeepSeek+ArcoDesign网页版AI流式对话模板
项目框架目录
.env配置文件
需要去deepseek网站申请一个apikey，替换掉.env文件里的key就能畅快体验deepseek聊天功能了。
# title
VITE_APP_TITLE = 'Vue3-Web-DeepSeek'
# port
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
布局模板
<script setup>
import Sidebar from '@/layouts/components/sidebar/index.vue'
</script>
<template>
<div class="vu__container">
<div class="vu__layout flexbox flex-col">
<div class="vu__layout-body flex1 flexbox">
<!-- 侧边栏 -->
<Sidebar />
<!-- 主面板 -->
<div class="vu__layout-main flex1">
<router-view v-slot="{ Component, route }">
<keep-alive>
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</div>
</div>
</div>
</div>
</template>
<template>
<div class="vu__sidebar" :class="{'collapsed': appstate.config.collapsed}">
<a-button class="vu__sidebar-collapse" shape="circle" @click="handleCollapse"></a-button>
<aside class="vu__sidebar-aside flex1 flexbox flex-col">
<div class="vu__aside-head">
<router-link to="/" class="logo"><i class="iconfont ai-deepseek"></i><span class="fs-14 ff-ab">Vue3-WebSeek</span></router-link>
<div class="btn-create flex-c mt-15" @click="handleCreate"><i class="iconfont ai-newchat fs-20"></i>新建对话</div>
</div>
<div class="vu__aside-navlinks flexbox flex-col">
<div class="section-navitem" @click="toLink('/aihub')">
<span class="icon flex-c"><icon-compass size="18" /></span>
<div class="title">AI 导航</div>
</div>
<a-dropdown trigger="hover" :show-arrow="false" position="rt" :popup-offset="15" :content-style="{'min-width': '150px'}">
<div class="section-navitem">
<span class="icon flex-c"><icon-command size="18" /></span>
<div class="title">AI 技能</div>
<i class="iconfont ai-arrR c-999 fs-12"></i>
</div>
<template #content>
<a-doption><i class="iconfont ai-aisousou"></i> AI搜索</a-doption>
<a-doption><i class="iconfont ai-fanyi"></i> 快速翻译</a-doption>
<a-doption><i class="iconfont ai-xiezuo"></i> 帮我写作</a-doption>
<a-doption><i class="iconfont ai-tuxiang"></i> 图像生成</a-doption>
<a-doption><i class="iconfont ai-aicode"></i> AI编程</a-doption>
</template>
</a-dropdown>
</div>
<a-divider style="margin: 0;" />
<div class="vu__aside-sessions flex1 flexbox flex-col">
<div class="vu__aside-navlinks">
<div class="section-navitem plain">
<span class="icon flex-c"><icon-message size="18" /></span>
<div class="title">最近对话</div>
<i class="clean iconfont ai-qingli" @click="handleClean"></i>
</div>
</div>
<a-scrollbar :outer-style="{'height': '100%'}">
<template v-if="sessionstate.session.length">
<SessionList />
</template>
<template v-else>
<a-empty description="暂无对话" />
</template>
</a-scrollbar>
</div>
<div class="vu__aside-navlinks" @click="toLink('/setting')">
...
</div>
</aside>
</div>
</template>
vue3接入deepseek-v3模型
目前deepseek官网已经全面接入最新deepseek-v3-0324大模型，调用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-Chat流式AI对话|vite6+vant4+deepseek智能ai聊天助手
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
uniapp+vue3酒店预订|vite5+uniapp预约订房系统模板(h5+小程序+App端)
Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
tauri2.0-admin桌面端后台系统|Tauri2+Vite5+ElementPlus管理后台EXE程序
uniapp-vue3-oadmin手机后台实例|vite5.x+uniapp多端仿ios管理系统
flutter3-winchat桌面端聊天实例|Flutter3+Dart3+Getx仿微信Exe程序
