https://antd-design-x-vue.netlify.app/assets/development_introduce.md.DmF3WgSp.lean.js

1import{a0 as i,a1 as a,a2 as n,ar as e}from"./chunks/framework.CRfA3hWN.js";const t="/images/x-logo.svg",l="/images/vue.svg",c=JSON.parse('{"title":"Ant Design X of Vue","description":"","frontmatter":{},"headers":[],"relativePath":"development/introduce.md","filePath":"development/introduce.md"}'),p={name:"development/introduce.md"};function h(k,s,d,r,o,g){return n(),a("div",null,s[0]||(s[0]=[e('<h1 id="ant-design-x-of-vue" tabindex="-1">Ant Design X of Vue <a class="header-anchor" href="#ant-design-x-of-vue" aria-label="Permalink to &quot;Ant Design X of Vue&quot;">​</a></h1><p><code>ant-design-x-vue</code> 是遵循 Ant Design 设计体系的一个 Vue UI 库，是 <code>@ant-design/x</code> 的 Vue 实现，用于构建由 AI 驱动的界面，一键接入智能对话组件与 API 服务。</p><div style="display:flex;align-items:center;gap:20px;"><img width="150" src="'+t+'"><span style="color:rgb(170, 170, 170);font-size:30px;use-select:none;">+</span><img width="160" src="'+l+`"></div><h2 id="✨-特性" tabindex="-1">✨ 特性 <a class="header-anchor" href="#✨-特性" aria-label="Permalink to &quot;✨ 特性&quot;">​</a></h2><ul><li>🌈 基于 RICH 交互范式，提供卓越的 AI 交互体验</li><li>🧩 覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面</li><li>⚡ 轻松对接符合 OpenAI 标准的模型推理服务</li><li>🔄 提供好用的数据流管理功能，让开发更高效</li><li>📦 提供多种模板，快速启动 LUI 应用开发</li><li>🛡 采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性</li><li>🎨 支持细粒度的样式调整，满足各种场景的个性化需求</li></ul><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="important custom-block github-alert"><p class="custom-block-title">IMPORTANT</p><p>确保你的 vue 版本大于 3.5</p></div><h3 id="使用-npm-或-yarn-或-pnpm-或-bun-安装" tabindex="-1">使用 npm 或 yarn 或 pnpm 或 bun 安装 <a class="header-anchor" href="#使用-npm-或-yarn-或-pnpm-或-bun-安装" aria-label="Permalink to &quot;使用 npm 或 yarn 或 pnpm 或 bun 安装&quot;">​</a></h3><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ChlMI" id="tab-RJnTGGG" checked><label data-title="npm" for="tab-RJnTGGG">npm</label><input type="radio" name="group-ChlMI" id="tab-r_wPAyj"><label data-title="pnpm" for="tab-r_wPAyj">pnpm</label><input type="radio" name="group-ChlMI" id="tab-5S0Cr9l"><label data-title="yarn" for="tab-5S0Cr9l">yarn</label><input type="radio" name="group-ChlMI" id="tab-8D8nyW5"><label data-title="bun" for="tab-8D8nyW5">bun</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ant-design-x-vue</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --save</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ant-design-x-vue</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> --save</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span>

1<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ant-design-x-vue</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> ant-design-x-vue</span></span></code></pre></div></div></div><h3 id="浏览器引入" tabindex="-1">浏览器引入 <a class="header-anchor" href="#浏览器引入" aria-label="Permalink to &quot;浏览器引入&quot;">​</a></h3><p>在浏览器中使用 <code>script</code> 和 <code>link</code> 标签直接引入文件，并使用全局变量 <code>antdx</code>。</p><p><span style="display:flex;gap:4px;align-items:center;">你可以通过 <a href="https://www.jsdelivr.com/package/npm/ant-design-x-vue" target="_blank" rel="noreferrer"><img src="https://data.jsdelivr.com/v1/package/npm/ant-design-x-vue/badge" alt=""></a> 或<a href="https://unpkg.com/ant-design-x-vue/dist/" target="_blank" rel="noreferrer">UNPKG</a>进行下载。</span></p><p>无任何构建的原始 HTML 在线示例：<a href="https://codepen.io/wzc520pyfm/pen/vEOVQLa" target="_blank" rel="noreferrer">CodePen 示例 &gt;</a></p><p>现代浏览器大多已原生支持 ES 模块，还可以启用 <a href="https://caniuse.com/import-maps" target="_blank" rel="noreferrer">导入映射表 (Import Maps)</a>：<a href="https://codepen.io/wzc520pyfm/pen/gbpBQLq" target="_blank" rel="noreferrer">CodePen 示例 &gt;</a></p><h3 id="自动导入" tabindex="-1">自动导入 <a class="header-anchor" href="#自动导入" aria-label="Permalink to &quot;自动导入&quot;">​</a></h3><p>在项目中自动导入组件，需要使用 <code>unplugin-vue-components</code> 插件，如果未安装，你可以通过以下命令安装：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-ot7zB" id="tab-YM0Luj7" checked><label data-title="npm" for="tab-YM0Luj7">npm</label><input type="radio" name="group-ot7zB" id="tab-od1rosh"><label data-title="pnpm" for="tab-od1rosh">pnpm</label><input type="radio" name="group-ot7zB" id="tab-BqTg2l_"><label data-title="yarn" for="tab-BqTg2l_">yarn</label><input type="radio" name="group-ot7zB" id="tab-sGeelwE"><label data-title="bun" for="tab-sGeelwE">bun</label></div><div class="blocks"><div class="language-sh vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> unplugin-vue-components</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> pnpm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> unplugin-vue-components</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span>

1<pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> yarn</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> unplugin-vue-components</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -D</span></span></code></pre></div><div class="language-sh vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">sh</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> bun</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> add</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> unplugin-vue-components</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -d</span></span></code></pre></div></div></div><p>在 <code>Vite</code> 或 <code>Webpack</code> 的配置文件中，添加以下依赖和插件：</p><div class="vp-code-group vp-adaptive-theme"><div class="tabs"><input type="radio" name="group-YK2J3" id="tab-ZJLCjhM" checked><label data-title="vite.config.js" for="tab-ZJLCjhM">vite.config.js</label><input type="radio" name="group-YK2J3" id="tab-bCFMagO"><label data-title="webpack.config.js" for="tab-bCFMagO">webpack.config.js</label></div><div class="blocks"><div class="language-js vp-adaptive-theme active"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// vite.config.js</span></span>
2<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> vue </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@vitejs/plugin-vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
3<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vite&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
4<span class="line"></span>
5<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// add the following dependencies</span></span>
6<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> components </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;unplugin-vue-components/vite&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
7<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AntDesignXVueResolver } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ant-design-x-vue/resolver&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
8<span class="line"></span>
9<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
10<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">

10  // ...</span></span>
11<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [</span></span>
12<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // add the following plugin</span></span>
13<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    components</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
14<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      resolvers: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">AntDesignXVueResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()]</span></span>
15<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    })</span></span>
16<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
17<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span></code></pre></div><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// webpack.config.js</span></span>
18<span class="line"></span>
19<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// add the following dependencies</span></span>
20<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> Components</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;unplugin-vue-components/webpack&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
21<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">AntDesignXVueResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> require</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;ant-design-x-vue/resolver&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
22<span class="line"></span>
23<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">module</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">exports</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
24<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  configureWebpack: {</span></span>
25<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    plugins: [</span></span>
26<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // add the following plugin</span></span>
27<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      Components.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
28<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">        resolvers: [</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">AntDesignXVueResolver</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()]</span></span>
29<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">      })</span></span>
30<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    ]</span></span>
31<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
32<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};

32</span></span></code></pre></div></div></div><p>更多打包工具的示例，可以参考 <a href="https://github.com/unplugin/unplugin-vue-components#installation" target="_blank" rel="noreferrer">unplugin-vue-components</a></p><p>在项目中，以 <code>AX</code> 开头的组件，将被自动解析为 <code>ant-design-x-vue</code> 组件并导入到文件中，你可以直接在模板中使用它们：</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
33<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// auto import equals to</span></span>
34<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import { Bubble as AXBubble } from &#39;ant-design-x-vue&#39;;</span></span>
35<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
36<span class="line"></span>
37<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
38<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">AXBubble</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> content</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;Hello AI&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="🧩-原子组件" tabindex="-1">🧩 原子组件 <a class="header-anchor" href="#🧩-原子组件" aria-label="Permalink to &quot;🧩 原子组件&quot;">​</a></h2><p>我们基于 RICH 交互范式，在不同的交互阶段提供了大量的原子组件，帮助你灵活搭建你的 AI 对话应用：</p><ul><li>通用: <code>Bubble</code> - 消息气泡、<code>Conversations</code> - 会话管理</li><li>唤醒: <code>Welcome</code> - 欢迎、<code>Prompts</code> - 提示集</li><li>表达: <code>Sender</code> - 发送框、<code>Attachment</code> - 附件、<code>Suggestion</code> - 快捷指令</li><li>确认: <code>ThoughtChain</code> - 思维链</li></ul><p>下面是使用原子组件搭建一个最简单的对话框的代码示例:</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> lang</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;ts&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
40<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
41<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 消息气泡</span></span>
42<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Bubble,</span></span>
43<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 发送框</span></span>
44<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Sender,</span></span>
45<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}

45 </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;ant-design-x-vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
46<span class="line"></span>
47<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineOptions</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;SampleChat&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> });</span></span>
48<span class="line"></span>
49<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> messages</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> [</span></span>
50<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
51<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    content: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;Hello, Ant Design X Vue!&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
52<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    role: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;user&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
53<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
54<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
55<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
56<span class="line"></span>
57<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
58<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Bubble.List</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;messages&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
59<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">Sender</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
60<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><p>这里有一个在线示例可供参考：<a href="https://stackblitz.com/edit/atgajqmx?file=src%2FDemo.vue" target="_blank" rel="noreferrer">Example Project</a>，也推荐fork该示例反馈bug。</p><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>文档中 tsx 风格的代码示例采用 <a href="https://vue-macros.dev/zh-CN/macros/define-render.html" target="_blank" rel="noreferrer"><code>defineRender</code></a> 编写，要运行它们，你还需要集成 <a href="https://vue-macros.dev/zh-CN/guide/bundler-integration.html" target="_blank" rel="noreferrer"><code>Vue Macros</code></a>.</p><p>Vue模板风格的示例代码在逐步更新中，你可以在左上角将 <strong>风格偏好</strong> 切换至 <code>setup</code> 预览。</p></div>`,29)]))}const y=i(p,[["render",h]]);export{c as __pageData,y as default};