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

开发大模型H5应用时，你是否总在重复解决这些问题：

流式接口怎么优雅处理断连、重试和进度管理？
Markdown回复里的代码高亮、图表、表格怎么适配移动端？
从零搭建Vue项目框架，还要兼顾H5响应式布局，耗时又费力？

现在，这套「大模型应用Vue H5模板」能帮你跳过所有前置工作------基于@lesliechueng/stream-fetch-manage和agent-markdown-vue深度集成，预置完整的流式对话场景和Markdown渲染能力，让你专注业务逻辑，30分钟即可启动一个可运行的大模型H5应用。

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

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

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

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

html 复制代码

<!-- 模板内置的聊天界面核心代码 -->
<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渲染能力

通过agent-markdown-vue组件（src/pages/components/Markdown.vue），完美支持大模型常见回复格式，并针对H5做了专项优化：

全格式兼容：代码高亮（多语言支持）、mermaid流程图/时序图、表格、图片、公式、引用块等，直接复用模板中的样式配置；
移动端适配 ：表格横向滚动、图片自适应宽度、代码块溢出滚动，配合postcss-px-to-viewport自动将px转为vw，确保在手机端显示正常；
自定义扩展：内置代码块复制按钮、引用标签hover效果、自定义HTML块（如带时间戳的代码卡片），可直接复用或二次修改。

html 复制代码

<!-- 模板中Markdown组件的核心配置 -->
<AgentMarkdown
  :content="llmResponse"
  :sanitize="true"
  :md-options="{ breaks: true, html: true }"
>
  <template #code="{ lang, rawCode }"> <!-- 自定义代码块样式 -->
    <div class="custom-code-block">
      <div class="code-block-header">
        <span class="code-block-lang">{{ lang }}</span>
        <div class="copy-btn">复制</div> <!-- 内置复制功能 -->
      </div>
      <pre><code v-html="setCodeStyle(rawCode, lang)"></code></pre>
    </div>
  </template>
  <template #mermaid="{ rawCode }"> <!-- 支持mermaid图表 -->
    <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步启动开发，效率拉满

克隆模板，安装依赖

bash 复制代码

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

启动本地服务，实时预览

bash 复制代码

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

替换接口，对接业务

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

typescript 复制代码

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组件地址