手记

全网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人推荐
随时随地看视频
慕课网APP