仿豆包 H5应用核心模板：用Vue快速复刻大模型对话体验

想开发一款像豆包一样流畅的大模型H5应用？但又被流式接口处理、复杂Markdown渲染、移动端适配这些问题困住？

现在，这套「仿豆包 H5应用核心模板」能帮你跳过90%的重复开发——基于@lesliechueng/stream-fetch-manage和agent-markdown-vue深度集成，完美复刻豆包式的对话交互体验，让你专注业务逻辑，30分钟即可启动一个功能完整的大模型H5应用。

模板核心优势：为大模型场景量身打造

1. 即开即用的流式对话框架

模板内置完整的聊天交互界面（src/pages/index.vue），从用户提问到AI流式回复的全流程已封装完毕：

• 基于StreamFetchClient实现流式请求管理，支持超时重试、多类型错误捕获（连接错误、解析错误等），无需手写复杂状态逻辑；
• 聊天记录自动按「用户/AI」角色区分展示，样式适配移动端，用户内容右对齐、AI内容左对齐，符合H5交互习惯；
• 可直接复用llmResponse状态管理逻辑，快速扩展消息发送、历史记录存储等功能。

<!-- 模板内置的聊天界面核心代码 -->
<div class="chat-container" v-for="item in llmResponse" :key="item.type">
  <div v-if="item.type === 'user'" class="user">
    <div class="user-content">{{ item.content }}</div> <!-- 用户提问样式 -->
  </div>
  <div v-else class="assistant">
    <Markdown :llmResponse="item.content" /> <!-- AI回复的Markdown渲染 -->
  </div>
</div>

2. 媲美豆包的Markdown渲染：格式再复杂也能完美展示

豆包能展示的富文本格式，这个模板全支持，且针对移动端优化：

• 完整格式兼容：代码高亮（JavaScript/Python等多语言）、mermaid流程图（如饼图/时序图）、表格横向滚动、公式（行内$E=m{c}^2$和块级公式）、嵌套引用块等，和豆包的展示效果一致；
• 自定义扩展元素：支持豆包式“引用标签”（如<span data-type="quote">）和“代码卡片”（带标题和时间戳），hover时还有细腻的动画效果；
• 移动端适配：图片自适应宽度、表格溢出滚动、代码块换行处理，在手机上的阅读体验和豆包一样流畅。

<!-- 模板中仿豆包的Markdown渲染组件 -->
<AgentMarkdown :content="llmResponse">
  <!-- 豆包式代码块：带语言标识和复制按钮 -->
  <template #code="{ lang, rawCode }">
    <div class="custom-code-block">
      <div class="code-block-header">
        <span>{{ lang }}</span>
        <div class="copy-btn">复制</div> <!-- 仿豆包的复制功能 -->
      </div>
      <pre><code v-html="setCodeStyle(rawCode, lang)"></code></pre>
    </div>
  </template>
  <!-- 支持豆包常见的mermaid图表 -->
  <template #mermaid="{ rawCode }">
    <VMermaid :content="rawCode" /> <!-- 流畅渲染流程图 -->
  </template>
</AgentMarkdown>

3. 开箱即用的Vue H5技术栈

模板基于Vue 3 + TypeScript构建，集成了成熟的H5开发工具链，无需从零配置：

• 响应式适配：通过vite.config.ts中的postcss-px-to-viewport自动将设计稿px转为vw，适配375px基准的移动端屏幕；
• 路由与状态管理：内置Vue Router和Pinia，支持页面缓存（App.vue中的keep-alive配置），轻松扩展多页面场景；
• 工程化工具：集成ESLint、Prettier、TypeScript类型检查，代码规范一键校验，降低团队协作成本。

3步启动开发，效率拉满

1. 克隆模板，安装依赖

   git clone https://github.com/ttLeslie/llm-template-vue-h5.git
   cd llm-template-vue-h5
   pnpm install
   

2. 启动本地服务，实时预览

   pnpm dev  # 访问http://localhost:5001即可看到带示例数据的聊天界面
   

3. 替换接口，对接业务
   修改src/pages/index.vue中的StreamFetchClient配置，替换baseUrl为你的大模型接口地址，即可实现真实流式交互：

   const streamFetch = new StreamFetchClient<IContent>({
     baseUrl: '你的大模型流式接口地址', // 替换为实际接口
     headers: { 'Content-Type': 'application/json' }
   }, {
     onMessage: (data) => { /* 处理流式消息 */ }
   })
   

为什么选择这套模板？

• 专注大模型场景：从流式请求到Markdown渲染，所有功能均针对大模型H5应用设计，避免冗余代码；
• 移动端优先：样式、布局、交互逻辑全适配手机端，无需额外调试；
• 完全开源可扩展：核心工具@lesliechueng/stream-fetch-manage（GitHub）和agent-markdown-vue（GitHub）源码开放，可按需定制。

如果你正在开发大模型相关的Vue H5应用，这套模板能帮你节省80%的基础开发时间。立即上手，让你的应用快速落地！

模板项目仓库地址

请求工具库地址

Markdown组件地址