2026年開年新作uniapp+vue3+mphtml集成deepseek-chat api聊天大模型，搭建三端通用ai流式对话应用。支持浅色+深色主题、新增深度思考链、katex数学公式、代码复制/高亮、链接/图片预览。

项目技术点

• 开发工具：HbuilderX 4.87
  
• 技术框架：uni-app+vue3+pinia2+vite5
  
• 大模型框架：DeepSeek-V3.2
  
• UI组件库：uni-ui+uv-ui
  
• 高亮插件：highlight.js
  
• markdown解析：ua-markdown+mp-html
  
• 本地缓存：pinia-plugin-unistorage
  
• 运行环境：Web+小程序+APP端

uniapp-deepseek项目已经正式发布到我的原创作品集，欢迎去下载使用。

https://b23.tv/1uQ7JBH

项目结构目录

基于uniapp+vue3搭建项目模板，接入deepseek api大模型。

支持运行到web端以750px排版居中布局。

项目通用模板

<template>
    <uv3-layout>
        <!-- 导航栏 -->
        <template #header>
            <Toolbar :title="chatSession?.title" />
        </template>
        
        <view v-if="chatSession && !isEmpty(chatSession.data)" class="vu__chatview flexbox flex-col">
            <scroll-view :scroll-into-view="scrollIntoView" scroll-y="true" @scrolltolower="onScrollToLower" @scroll="onScroll" style="height: 100%;">
                <view class="vu__chatbot">
                    ...
                </view>
                <view id="scrollbottom-placeholder" style="height: 1px;"></view>
            </scroll-view>
            <!-- 滚动到底部 -->
            <view class="vu__scrollbottom" @click="scrollToBottom"><text class="iconfont ai-arrD fw-700"></text></view>
        </view>
        <!-- 欢迎信息 -->
        <view v-else class="vu__welcomeinfo">
            <view class="intro flex-c flex-col">
                <view class="logo flex-c" style="gap: 15px;">
                    <view class="iconfont ai-deepseek" style="font-size: 40px;"></view>
                    <text style="color: #999; font-size: 20px;">+</text>
                    <image src="/static/uni.png" mode="widthFix" style="height: 30px; width: 30px;" />
                </view>
                <view class="name"><text class="txt text-gradient">嘿~ Uniapp-DeepSeek</text></view>
                <view class="desc">我可以帮你写代码、答疑解惑、写作各种创意内容，请把你的任务交给我吧~</view>
            </view>
            <view class="prompt">
                <view class="tip flex-c"><text class="flex1">试试这样问</text><view class="flex-c" @click="refreshPrompt">换一换<uni-icons type="refreshempty" color="#999" size="14" /></view></view>
                <view v-for="(item,index) in promptList" :key="index">
                    <view class="option" @click="changePrompt(item.prompt)">{{item.emoji}} {{item.prompt}} <text class="arrow iconfont ai-arrR c-999"></text></view>
                </view>
            </view>
        </view>
        
        <template #footer>
            <view :style="{'padding-bottom': keyboardHeight + 'px'}">
                <ChatEditor ref="editorRef" v-model="promptValue" :scrollBottom="scrollToBottom" />
            </view>
        </template>
    </uv3-layout>
</template>

uniapp+mphtml渲染markdown

由于rich-text组件对小程序有一些限制，改为使用mphtml和markdown-it组件解析标签结构。

<template>
    <view class="ua__markdown">
        <mp-html :content="parseNodes" @linktap="handleLinkTap" />
    </view>
</template>

配置如下

const props = defineProps({
    // 解析内容
    source: String,
    // 是否显示代码块行号(关闭后性能更优)
    showLine: { type: [Boolean, String], default: true },
    // 开启katex
    katex: { type: Boolean, default: true },
    // markdown-it插件配置
    plugins: {
        type: Array,
        default: () => []
    },
})

ok，以上就是uniapp+deepseek搭建流式ai系统的一些分享，感谢阅读与支持。

2026最新原创vue3.5+vite7+deepseek-chat网页pc版流式打字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应用

uni-app+deepseek-v3跨三端ai流式输出对话模板

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