继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

全网vue3+vite6+deepseek api实现流式AI问答小助手

xiaoyan2015
关注TA
已关注
手记 52
粉丝 32
获赞 115

基于Vue3+Vite6+OpenAI对接DeepSeek API聊天小助手模板,支持流式打字输出效果、浅色+暗黑主题模式、代码高亮显示、针对移动端+PC端适配处理。

图片描述

实现技术

  • 技术框架:vite6.2.0+vue3.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

图片描述

图片描述

功能特性

  1. 基于Vue3构建,集成DeepSeek,性能更优,对话丝滑流畅
  2. 支持各种代码高亮,方便展示和分享代码片段
  3. 使用vant4组件库,风格统一,时尚大气
  4. 支持移动端+PC端750px像素适配,大屏也有良好体验
  5. 流式响应:逐字显示 AI 回复,提供更好的用户体验

图片描述

图片描述

项目结构

图片描述

deepseek-vue3chat聊天ai助手已经发布到我的原创作品集。

vue3.5+deepseek+vant4打字流式输出ai聊天

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

图片描述

如果想要了解更多的技术实现细节,可以去看看下面这篇分享文章。
https://www.cnblogs.com/xiaoyan2017/p/18773480

图片描述

打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP