为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

图片描述

点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

0 评论

作者其他优质文章

正在加载中
Web前端工程师
手记
52
粉丝
32
获赞与收藏
115

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

举报

0/150
提交
取消