admin管理员组

文章数量:1034145

deepseek+vue3.5+arco+markdown网页版流式AI聊天问答

半个月之前有发布一篇vite6+deepseek+vant4构建mobile版智能ai对话助手。

这次带来实战原创新作Vue3.5+DeepSeek API+Arco搭建网页版AI流式聊天会话小助手。

deepseek-vue3-webai实现流式打字输出，支持亮色+暗黑模式、各种代码高亮等功能。

实现技术

  • 开发工具：Vscode
  • 前端框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0
  • 大模型框架：DeepSeek-R1 + OpenAI
  • 组件库：arco-design^2.57.0 (字节桌面端组件库)
  • 状态管理：pinia^3.0.1
  • 本地存储：pinia-plugin-persistedstate^4.2.0
  • 高亮插件：highlight.js^11.11.1
  • markdown解析：markdown-it

项目特征

  1. 流式响应，基于Vue3+DeepSeek实现逐行打字输出效果
  2. 采用Vite6构建，接入DeepSeek，性能更优，聊天丝滑流畅
  3. 支持各种代码高亮，利于展示和分享代码片段
  4. 使用arco-design组件库，风格统一，美观大气

项目结构目录

整个项目使用vite6搭建框架，整合deepseek api实现流式会话功能，采用vue3 setup语法开发。

.env配置文件

去deepseek官网申请apikey，替换掉VITE_DEEPSEEK_API_KEY即可快速体验ai功能。

代码语言：actionscript复制
# 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 =

项目布局模板

如下图：整个项目分为侧边栏+顶部导航条+会话区域。

代码语言：actionscript复制
<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>

如上图：侧边栏会话列表支持超过高度滚动条显示。

代码语言：actionscript复制
<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对话框

代码语言：actionscript复制
<template>
  <div class="v3ai__footbar flexbox flex-col">
    <!-- 技能栏 -->
    <div v-if="skillbar" class="v3ai__skills flexbox flex-alignc">
      ...
    </div>
    <!-- 编辑栏 -->
    <div class="v3ai__inputbox flexbox flex-col">
      <div class="v3ai__editor flexbox">
        ...
      </div>
      <!-- 操作栏 -->
      <div class="v3ai__tools flexbox flex-alignc">
        <div class="option flex1 flexbox">
          <div class="btn" :class="{'active': isDeep}" @click="isDeep =! isDeep"><i class="iconfont ai-deepthink"></i> 深度思考 (R1)</div>
          <div class="btn" :class="{'active': isNetwork}" @click="isNetwork =! isNetwork"><i class="iconfont ai-network"></i> 联网</div>
        </div>
        <a-dropdown trigger="hover" :show-arrow="false" position="lb" :content-style="{'min-width': '250px'}">
          <a-button shape="circle"><icon-attachment size="18" /></a-button>
          <template #content>
            ...
          </template>
        </a-dropdown>
        <a-tooltip content="添加图片" position="top" mini>
          <a-button shape="circle"><icon-image size="18" /></a-button>
        </a-tooltip>
        <a-dropdown :show-arrow="false" position="top" :popup-translate="[-10, -5]">
          <a-button shape="circle" style="background: none;"><icon-plus size="18" /></a-button>
          <template #content>
            <a-doption value="pyq"><icon-apps /> 文件</a-doption>
            <a-doption value="qq"><icon-apps /> PDF文档分析</a-doption>
            <a-doption value="qq"><icon-apps /> Word文档分析</a-doption>
            <a-doption value="qq"><icon-apps /> 网页总结</a-doption>
          </template>
        </a-dropdown>
        <a-divider direction="vertical" style="margin: 0 8px 0 5px;" />
        <a-button type="primary" shape="circle" :disabled="!editorText?.trim() || sessionstate.loading" @click="handleSubmit">
          <icon-arrow-up v-if="!sessionstate.loading" size="20" />
          <icon-loading v-else size="18" />
        </a-button>
      </div>
    </div>
  </div>
</template>

vue3对接deepseek

代码语言：actionscript复制
const completion = await openai.chatpletions.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)

处理流式返回结果。

代码语言：actionscript复制
// 处理流式输出
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()
  }
}

flutter3.27+getx仿抖音app商城： Electron32桌面端os系统： electron31+vue3客户端聊天Exe实例： tauri2.0+vue3客户端admin后台系统： uniapp+vue3仿携程预订客房模板：

OK，以上就是vue3.5集成deepseek实战智能AI聊天会话的一些知识分享，希望对大家有所帮助！

deepseek+vue3.5+arco+markdown网页版流式AI聊天问答

半个月之前有发布一篇vite6+deepseek+vant4构建mobile版智能ai对话助手。

这次带来实战原创新作Vue3.5+DeepSeek API+Arco搭建网页版AI流式聊天会话小助手。

deepseek-vue3-webai实现流式打字输出，支持亮色+暗黑模式、各种代码高亮等功能。

实现技术

  • 开发工具：Vscode
  • 前端框架：vite^6.2.0+vue^3.5.13+vue-router^4.5.0
  • 大模型框架：DeepSeek-R1 + OpenAI
  • 组件库：arco-design^2.57.0 (字节桌面端组件库)
  • 状态管理：pinia^3.0.1
  • 本地存储：pinia-plugin-persistedstate^4.2.0
  • 高亮插件：highlight.js^11.11.1
  • markdown解析：markdown-it

项目特征

  1. 流式响应，基于Vue3+DeepSeek实现逐行打字输出效果
  2. 采用Vite6构建，接入DeepSeek，性能更优，聊天丝滑流畅
  3. 支持各种代码高亮，利于展示和分享代码片段
  4. 使用arco-design组件库，风格统一，美观大气

项目结构目录

整个项目使用vite6搭建框架，整合deepseek api实现流式会话功能，采用vue3 setup语法开发。

.env配置文件

去deepseek官网申请apikey，替换掉VITE_DEEPSEEK_API_KEY即可快速体验ai功能。

代码语言：actionscript复制
# 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 =

项目布局模板

如下图：整个项目分为侧边栏+顶部导航条+会话区域。

代码语言：actionscript复制
<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>

如上图：侧边栏会话列表支持超过高度滚动条显示。

代码语言：actionscript复制
<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对话框

代码语言：actionscript复制
<template>
  <div class="v3ai__footbar flexbox flex-col">
    <!-- 技能栏 -->
    <div v-if="skillbar" class="v3ai__skills flexbox flex-alignc">
      ...
    </div>
    <!-- 编辑栏 -->
    <div class="v3ai__inputbox flexbox flex-col">
      <div class="v3ai__editor flexbox">
        ...
      </div>
      <!-- 操作栏 -->
      <div class="v3ai__tools flexbox flex-alignc">
        <div class="option flex1 flexbox">
          <div class="btn" :class="{'active': isDeep}" @click="isDeep =! isDeep"><i class="iconfont ai-deepthink"></i> 深度思考 (R1)</div>
          <div class="btn" :class="{'active': isNetwork}" @click="isNetwork =! isNetwork"><i class="iconfont ai-network"></i> 联网</div>
        </div>
        <a-dropdown trigger="hover" :show-arrow="false" position="lb" :content-style="{'min-width': '250px'}">
          <a-button shape="circle"><icon-attachment size="18" /></a-button>
          <template #content>
            ...
          </template>
        </a-dropdown>
        <a-tooltip content="添加图片" position="top" mini>
          <a-button shape="circle"><icon-image size="18" /></a-button>
        </a-tooltip>
        <a-dropdown :show-arrow="false" position="top" :popup-translate="[-10, -5]">
          <a-button shape="circle" style="background: none;"><icon-plus size="18" /></a-button>
          <template #content>
            <a-doption value="pyq"><icon-apps /> 文件</a-doption>
            <a-doption value="qq"><icon-apps /> PDF文档分析</a-doption>
            <a-doption value="qq"><icon-apps /> Word文档分析</a-doption>
            <a-doption value="qq"><icon-apps /> 网页总结</a-doption>
          </template>
        </a-dropdown>
        <a-divider direction="vertical" style="margin: 0 8px 0 5px;" />
        <a-button type="primary" shape="circle" :disabled="!editorText?.trim() || sessionstate.loading" @click="handleSubmit">
          <icon-arrow-up v-if="!sessionstate.loading" size="20" />
          <icon-loading v-else size="18" />
        </a-button>
      </div>
    </div>
  </div>
</template>

vue3对接deepseek

代码语言：actionscript复制
const completion = await openai.chatpletions.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)

处理流式返回结果。

代码语言：actionscript复制
// 处理流式输出
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()
  }
}

flutter3.27+getx仿抖音app商城： Electron32桌面端os系统： electron31+vue3客户端聊天Exe实例： tauri2.0+vue3客户端admin后台系统： uniapp+vue3仿携程预订客房模板：

OK，以上就是vue3.5集成deepseek实战智能AI聊天会话的一些知识分享，希望对大家有所帮助！

本文标签： deepseekvue35arcomarkdown网页版流式AI聊天问答

版权声明：本文标题：deepseek+vue3.5+arco+markdown网页版流式AI聊天问答 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1748116551a2255832.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。