首发vite8.0+vue3+deepseek+markdown手搓网页版ai流式生成模板

举报
yxybox 发表于 2026/03/19 23:05:26 2026/03/19
【摘要】 2026年最新重磅升级Vite8+Vue3+Arco+DeepSeek搭建本地pc网页版ai流式打字问答系统。提供暗黑+亮色主题、支持流式打字输出、深度思考、代码高亮/复制/下载、渲染katex公式/mermaid图等功能。

经过一周爆肝迭代,最新款vite8+vue3.5+arco+pinia3深度接入deepseek搭建pc版流式问答助手。


未标题-a6.png

p1.gif


项目功能清单

  • 内置深色+浅色主题 ✨
  • 新增深度思考模式 ✨
  • 支持katex数学公式 ✨
  • 支持渲染mermaid图表(拖拽、缩放(放大+缩小+重置)、下载)✨
  • 支持代码块sticky粘性、横向滚动、代码复制/下载代码 ✨
  • 支持上下文多轮对话/本地存储对话 ✨
  • 支持链接跳转、图片预览功能 ✨


p2.gif

未标题-a1.png


项目技术栈

  • 编辑器:VScode
  • 技术框架:vite8.0+vue3.5.30+vue-router5.0.3
  • AI模型:deepseek-v3.2 + openai
  • 组件库:arco-design2.57.0
  • 状态管理:pinia3.0.4
  • markdown插件:markdown-it14.1.0
  • 代码高亮插件:highlight.js11.11.1
  • katex公式:plugin-katex0.25.1


未标题-a2.png

未标题-a4.png


项目结构目录

基于vite8.0+vue3搭建项目模板,采用vue3 setup语法开发页面。


360截图20260316084923750.png


deepseek-vite8-webai网页ai系统已经正式同步到我的原创作品小店,感谢支持!

https://b23.tv/UJCoH9z


未标题-a5.png


项目入口文件

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'

// 引入路由/状态配置
import Router from './router'
import Pinia from './pinia'

// 引入插件配置
import Plugins from './plugins'

// 初始化app实例
createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')

通用布局结构

<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>

360截图20260316084923762.png

360截图20260316085038394.png

360截图20260316085649321.png

360截图20260316085817384.png

360截图20260318085020005.png

360截图20260318090351898.png

360截图20260318090638162.png

360截图20260318091224577.png

360截图20260318092906040.png

360截图20260318102859872.png

综上就是vite8+deepseek搭建web版流式聊天对话的一些项目分享,感谢阅读与支持!

2026最新款Uniapp+DeepSeek+mphtml纯手撸跨三端ai流式输出模板

2026重磅爆肝tauri2.10+vite7.3+openai集成deepseek桌面客户端AI智能系统

Vite7.2仿写DeepSeek流式AI会话

Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面

2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe

最新研发vite7.0+electron38客户端仿微信EXE聊天软件

原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用

2025最新款Tauri2.9+Vite7+Vue3+ElementPlus电脑端后台管理系统Exe

最新版Vite7.1+Tauri2.8+Vue3电脑端仿QQ/微信聊天程序

Flutter3.32实战桌面端OS系统|flutter3仿macOS桌面

flutter3.27跨平台仿微信客户端聊天Exe程序|朋友圈|短视频

flutter3+deepseek手机端ai流式输出聊天模板

实战跨平台Electron35+DeepSeek-V3搭建客户端AI模板

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。