基于vite7.2+vue3.5+deepseek-v3.2高颜值流式ai会话助手

本文涉及的产品
RDS DuckDB + QuickBI 企业套餐,8核32GB + QuickBI 专业版
简介: 基于vue3.5+vite7.2+vant4+markdown+openai深度集成deepseek-v3.2聊天大模型。支持浅色+深色主题、stream流式输出、代码高亮、复制代码、katex公式、mermaid图表等功能。

迎接2026最新研发vite7+vue3+vant4+openai集成deepseek-chat聊天大模型,搭建一款mobile版流式输出ai对话助手。

未标题-3.png

支持浅色+深色主题、代码高亮/复制代码、katex公式和mermaid图表功能。

p3.gif   p4.gif

技术栈

  • 技术框架:vite^7.2.4+vue^3.5.24+vue-router^4.6.4
  • 大模型框架:deepseek-v3.2 + openai
  • UI组件库:vant^4.9.21 (有赞vue3移动端组件库)
  • 状态管理:pinia^3.0.4
  • 高亮插件:highlight.js^11.11.1
  • markdown解析:markdown-it
  • katex公式:@mdit/plugin-katex^0.24.1

p5.gif

项目特色

  1. 基于Vite7.2构建,集成DeepSeek-Chat模型,性能更优,对话丝滑流畅
  2. 支持各种代码高亮(复制代码/收缩功能),方便展示和分享代码片段
  3. 支持输出Katex数学公式、Mermaid图表
  4. 使用vant4组件库,风格统一,时尚大气
  5. 支持移动端+PC端750px像素适配


未标题-2.png 未标题-p1.png 未标题-p3.png

项目框架目录

360截图20251222233502584.png

001360截图20251222193621367.png   002360截图20251222193857046.png 004360截图20251222194654876.png   004360截图20251222194816308.png 005360截图20251222194921868.png   006360截图20251222195224210.png 007360截图20251222201436729.png   008360截图20251222201558873.png 009360截图20251222202431855.png   014360截图20251222204432469.png

如下图:项目还支持运行到PC网页版,750px宽度展示页面布局。

015360截图20251222205124068.png 015360截图20251222205647755.png 015360截图20251222210111883.png 015360截图20251222210330994.png 015360截图20251222210419690.png


原创编码不易,最后感谢大家的阅读与支持!



目录
相关文章
|
5月前
|
存储 人工智能 前端开发
基于deepseek+vue3.5+vite7+arco从0-1搭建网页版ai问答小助手
2026最新实战研发vue3.5+vite7.2+deepseek-v3.2+arco打造网页web版流式ai会话模板。
298 9
使用markdown-it对markdown进行一个实时解析
# 引言 大家应该都接触过markdown笔记吧,我们常常见到很多能写文章的网页提供了一个实时的markdown解析的功能----即我们在一侧写下markdown语法,右边能够实时解析,并将解析后的markdown语法渲染到右侧页面上。非常炫酷实用,那么这是如何实现的呢?今天我们来一起探究一下。 # 开始 首先,我们这个演示学习在Vue3+TypeScript下使用的,所以我们预先建议准备一个Vue3+Typescript工程。 对于markdown的解析,我们可以使用`markdown-it`来进行解析。 比如,我们在左侧设置一个输入框,接收用户markdown输入,我们通过`ma
|
5月前
|
弹性计算 网络安全 异构计算
使用阿里云GPU服务器部署Qwen3-235B-A22B推理模型,基于ecs.ebmgn8v实例规格
本文介绍如何使用阿里云GPU服务器(ecs.ebmgn8v实例,8卡96GB显存)部署Qwen3-235B-A22B大模型,涵盖创建VPC、安全组、GPU实例、环境配置、模型下载、部署及推理测试全流程,费用约290元/小时。
|
2月前
|
人工智能 自然语言处理 监控
字节开源 DeerFlow 2.0:智能体开始“自己干活”了
字节开源DeerFlow 2.0智能体框架:告别“问答式AI”,支持长时任务执行、多Agent协作、沙盒代码运行与分层记忆。面向测试开发,可自动生成用例、执行接口测试、定位缺陷,推动测试从“脚本编写”迈向“流程设计”新阶段。
|
2月前
|
移动开发 JavaScript 前端开发
前端组件库——Vant 4知识点大全(一)
教程来源 http://yvyus.cn/ Vant 4 是面向 Vue 3 的轻量级移动端组件库,2022年12月发布,支持深色模式、5个新组件(如TimePicker、DatePicker)、体积更小(组件平均<1KB),零依赖、TypeScript 全面支持,GitHub 星标超2.2万,国内H5开发事实标准。
|
2月前
|
存储 人工智能 API
基于Flutter3.41+Dart3.11+DeepSeek生成式AI对话应用App助手
Flutter3.41+Dart3+Dio+Getx+Markdown聚合DeepSeek-chat实战AI流式打字智能会话模板。新增深度思考模式、latex公式、mermaid图表,代码高亮/复制代码、图片预览、链接、表格等功能。
163 4
|
3月前
|
缓存 人工智能 自然语言处理
阿里云Tokens收费价格——Qwen3.5-Plus费用说明及免费100万Tokens领取条件
阿里云Qwen3.5-Plus大模型支持1M上下文、文本生成、深度思考与视觉理解。本文详列不同输入规模(≤128k/128k–256k/256k–1M)的Tokens计费标准,含输入/输出、Batch/Chat及显式缓存创建与命中价格,并提供开通百炼即领超7000万免费Tokens权益,免费Tokens领取:https://t.aliyun.com/U/fPVHqY
2238 1
|
2月前
|
人工智能 JavaScript 前端开发
从零开始:手把手教你用Vue构建完美复刻大模型打字效果的对话界面
本文深入解析AI对话应用中流式输出(Streaming)的实现原理与工程实践,涵盖SSE协议选型、Fetch+ReadableStream替代EventSource、Vue响应式流处理、Markdown实时渲染、光标动画、平滑滚动、AbortController中断、DOM性能优化及XSS防护等核心环节,助力打造专业级流式交互体验。(239字)
595 0
|
存储 人工智能 前端开发
vue3.5接入deepseek-v3网页版ai流式多轮聊天问答助手
vue3-deepseek-webai:原创新作vite6+vue3.5+deepseek-v3+arco-design实战一款高颜值网页版ai多轮输出对话小助手。
1508 14
|
6月前
|
人工智能 运维 机器人
3000万人问AI什么?千问这份榜单让老金看懂了2025年真相
加我进AI讨论学习群,公众号右下角“联系方式”文末有老金的 开源知识库地址·全免费