vue3.5+deepseek+arco+markdown搭建web版流式输出AI模板

随着deepseek的持续爆火,2025年将是各种ai应用正式落地元年。最近基于vite6+deepseek api+arco-design搭建了一款网页版ai会话助手。

vue3-web-deepseek实现了流式打字输出 效果,支持暗黑+亮色模式。

使用技术

  • 开发工具: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

项目结构

整个项目使用vite6构建项目模板,整合deepseek-chat模型,采用vue3 setup语法编码。

.env配置

需要去deepseek网站申请一个apikey,替换掉.env文件里的Key即可畅快体验ai聊天对话功能。

ts 复制代码
# 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

项目布局模板

整体分为可收缩侧边栏+顶部导航+会话区三个板块。

ts 复制代码
<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>

侧边栏会话列表超出高度,有滚动条显示。

ts 复制代码
<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实现对话框

ts 复制代码
<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构建网页版ai的一些分享。 开发不易,感谢小伙伴们的阅读与支持!

vue3+deepseek api搭建mobile版智能ai聊天对话助手

Flutter3.27跨平台仿携程app酒店预订模板

Vue3-Electron32-OS桌面os实例|electron32+vite5+arco实战os桌面

自研tauri2.0+vite5+vue3+element-plus电脑版exe聊天系统Vue3-Tauri2Chat

uni-vue3-wechat:基于uni-app+vue3+pinia2多端仿微信App聊天

原创flutter3.27仿抖音app商城|flutter3.x短视频+直播+聊天app实例

相关推荐
顺遂时光1 小时前
微信小程序——解构赋值与普通赋值
前端·javascript·vue.js
anyeyongzhou1 小时前
img标签请求浏览器资源携带请求头
前端·vue.js
AIGC大时代1 小时前
DeepSeek学术仿写过程中如何拆解框架?
人工智能·chatgpt·智能写作·deepseek·aiwritepaper
努力的搬砖人.2 小时前
axios使用
vue.js
花花鱼2 小时前
vue3 动态组件 实例的说明,及相关的代码的优化
前端·javascript·vue.js
华健课堂2 小时前
DeepSeek 聊天机器人项目
人工智能·deepseek
7675604792 小时前
useAsyncState源码解读
前端·vue.js
就叫飞六吧3 小时前
git克隆项目报错:error: unable to create file vue...... Filename too long
前端·vue.js·git
光影少年3 小时前
vue3为什么要用引入Composition api
前端·vue.js