阅读视图

发现新文章，点击刷新页面。

大模型应用 Vue H5 模板：快速落地流式交互与富文本渲染的开箱方案

掘金前端

草东没有派对吗

2025年9月11日 11:16

大模型应用 Vue H5 模板：快速落地流式交互与富文本渲染的开箱方案,开发大模型H5应用时，你是否总在重复解决这些问题

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

掘金前端

草东没有派对吗

2025年9月12日 10:35

想开发一款像豆包一样流畅的大模型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=mc²$ 和块级公式）、嵌套引用块等，和豆包的展示效果一致；
自定义扩展元素：支持豆包式“引用标签”（如<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步启动开发，效率拉满

克隆模板，安装依赖

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

启动本地服务，实时预览

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

替换接口，对接业务
修改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组件地址

vue markdown组件|大模型应用专用

掘金前端

草东没有派对吗

2025年9月9日 14:07

🌟 这组件到底牛在哪？

⚡️ 性能炸裂

别家组件渲染长文本时像在加载大型游戏？我们直接基于Markdown生成VNode，实现增量渲染

🔧 灵活到离谱：想用啥样式就用啥样式

插槽覆盖全场景自定义，举例几个高频用法：

自定义行内 vue组件：通过 htmlInline插槽可捕获 markdown 中的行内 HTML 标签（如span），并基于标签属性（attrs）自定义交互逻辑，适用于实现引用标注、动态提示等功能。，完美解决DOM直接插入导致的不可进行交互的弊端

<template>
  <AgentMarkdown
    :content="content"
    :md-options="{
      breaks: true,
      html: true,
    }"
    :sanitize="true"
  >
    <template #htmlInline="{ tags, attrs }">
      <span v-if="tags === 'span' && attrs[0].type === 'quote'" class="quote-tag">{{
        attrs[0].title
      }}</span>
    </template>
  </AgentMarkdown>
</template>

<script setup lang="ts">
import { AgentMarkdown } from 'agent-markdown-vue';

const content = `
地铁 6 号线串联虎丘、拙政园、平江路等景点，建议优先使用<span data-type="quote" data-title="苏州市人民政府" data-content="“五一”假期，古城旅游交通出行攻略"> </span> 。苏州地铁 6 号线在苏州中心区域，连接了苏州中心、虎丘、拙政园、平江路等景点。
`;
</script>

自定义块级 vue组件：通过 htmlBlock插槽可处理块级 HTML 标签（如div），结合标签属性实现复杂的块级交互组件，例如带标题和元数据的自定义卡片。

<template>
  <AgentMarkdown :content="content" :md-options="{ breaks: true, html: true }" :sanitize="true">
    <template #htmlBlock="{ tags, attrs }">
      <div v-if="tags === 'div' && attrs[0].type === 'code'" class="code-block">
        <div class="top">{{ attrs[0].title }}</div>
        <div class="bottom">创建时间：{{ attrs[0].time }}</div>
      </div>
    </template>
  </AgentMarkdown>
</template>

<script setup lang="ts">
import { AgentMarkdown } from 'agent-markdown-vue';
const content = `
根据你的要求，我调整了代码结构：
<div data-type="code" data-title="javascript快速排序的示例" data-time="2023-08-01" data-content="function quickSort(arr) {
  if (arr.length <= 1) {
    return arr;
  }
  const pivot = arr[0];
  const left = [];
  const right = [];
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return [...quickSort(left), pivot, ...quickSort(right)];
}">  </div>
`;
</script>

代码块：想换高亮风格？随便插！

<agent-markdown :content="md">
    <template #javascript="{ rawCode }">
        <MyHighlight :code="rawCode" theme="dark" />
    </template>
</agent-markdown>

mermaid流程图：自带平滑渲染效果（附核心代码）

<template #mermaid="{ rawCode }">
    <MyMermaid :content="rawCode" />
    <!-- 内置防抖+交替渲染，避免闪烁 -->
</template>

图片：懒加载、预览、水印可根据自己的需求进行封装组件

<template #image="{ src, alt }">
    <MyImage :src="src" :alt="alt" lazy />
</template>

🛡️ 企业级安全：防XSS就像戴了金钟罩

用户输入的内容不敢直接渲染？开启sanitize: true就行：

基于dompurify自动过滤危险HTML
白名单机制严格限制允许的标签/属性
公式、代码块等特殊内容单独处理，安全不打折

🚀 5分钟上手教程

1. 安装

# npm
npm install agent-markdown-vue --save-dev
# yarn
yarn add agent-markdown-vue --save-dev
# pnpm
pnpm add agent-markdown-vue --save-dev

2. 基础用法

<template>
    <agent-markdown
        :content="llmResponse"
        :sanitize="true" 
        @link-click="handleLink"
    />
</template>
<script setup>
import { AgentMarkdown } from 'agent-markdown-vue'

// 大模型返回的markdown内容
const llmResponse = `
# 这是LLM生成的内容
- 支持**加粗**、*斜体*
- 代码块：
\`\`\`javascript
console.log('agent-markdown-vue')
\`\`\`
- 公式：$E=mc^2$
`
const handleLink = (e: Event, href: string, title: string) => { window.open(href, '_blank'); };
</script>

🌱 开源地址 & 贡献指南

👉 在线文档

👉 GitHub仓库求个star🌟🌟🌟！

目前还在快速迭代中，欢迎大家：

提issue反馈bug/需求
提交PR参与开发（新手友好，有详细贡献指南）
用它开发项目后告诉我，我会收录到案例库～

最后说句掏心窝子的话：做这个组件时踩了无数坑，现在把解决方案开源出来，就是希望大家能少走弯路。如果它帮到了你，欢迎转发给更多有需要的同学，咱们一起让LLM应用开发更简单！💪