PageSourceSearch

https://antd-design-x-vue.netlify.app/development/introduce

html antd-design-x-vue.netlify.app collected 2026-10-03 10:26:59 UTC 40,313 bytes, 88 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US" dir="ltr">
3  <head>
4    <meta charset="utf-8">
5<!-- This site is hosted on Netlify. Anyone can build and deploy a site
6     like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=cb006e4e-afce-4c3e-9652-6f8a065b5b6e
7     Netlify hosting facts for this site: static/SSR served via Netlify Edge. -->
8    <meta name="viewport" content="width=device-width,initial-scale=1">
9    <title>Ant Design X of Vue | Ant Design X Vue</title>
10    <meta name="description" content="Ant Design X For Vue">
11    <meta name="generator" content="VitePress v1.5.0">
12    <link rel="preload stylesheet" href="/assets/style.Cmm6AGrc.css" as="style">
13    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
14    
15    
15<script type="module" src="/assets/app.BiqZGm-U.js"></script>
15
16    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
17    <link rel="modulepreload" href="/assets/chunks/theme.DoOlbyuc.js">
18    <link rel="modulepreload" href="/assets/chunks/framework.CRfA3hWN.js">
19    <link rel="modulepreload" href="/assets/development_introduce.md.DmF3WgSp.lean.js">
20    <link rel="icon" href="/images/x-logo.svg">
21    
21<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"dark",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
21
22    
22<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
22
23  </head>
24  <body>
25    <div id="app"><!--[--><!--[--><!--[--><!--[--><!--[--><div class="Layout" data-v-553014fb><!--[--><!--]--><!--[--><span tabindex="-1" data-v-1acfc423></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-1acfc423> Skip to content </a><!--]--><!----><header class="VPNav" data-v-553014fb data-v-56a8e719><div class="VPNavBar" data-v-56a8e719 data-v-ffb6a34d><div class="wrapper" data-v-ffb6a34d><div class="container" data-v-ffb6a34d><div class="title" data-v-ffb6a34d><div class="VPNavBarTitle has-sidebar" data-v-ffb6a34d data-v-51430e44><a class="title" href="/" data-v-51430e44><!--[--><!--]--><!--[--><img class="VPImage logo" src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original" alt data-v-b1cf9f1e><!--]--><span data-v-51430e44>Ant Design X Vue</span><!--[--><!--]--></a></div></div><div class="content" data-v-ffb6a34d><div class="content-body" data-v-ffb6a34d><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ffb6a34d><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ffb6a34d data-v-4e306fa8><span id="main-nav-aria-label" class="visually-hidden" data-v-4e306fa8> Main Navigation </span><!--[--><!--[--><a class='VPLink link VPNavBarMenuLink active' data-v-4e306fa8 data-v-cfc2fde8 href='/development/introduce' tabindex='0'><!--[--><span data-v-cfc2fde8>研发</span><!--]--></a><!--]--><!--[--><a class='VPLink link VPNavBarMenuLink' data-v-4e306fa8 data-v-cfc2fde8 href='/component/overview' tabindex='0'><!--[--><span data-v-cfc2fde8>组件</span><!--]--></a><!--]--><!--[--><a class='VPLink link VPNavBarMenuLink' data-v-4e306fa8 data-v-cfc2fde8 href='/playground/independent' tabindex='0'><!--[--><span data-v-cfc2fde8>演示</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-4e306fa8 data-v-44aa6036><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-44aa6036><span class="text" data-v-44aa6036><!----><span data-v-44aa6036>更多</span><span class="vpi-chevron-down text-icon" data-v-44aa6036></span></span></button><div class="menu" data-v-44aa6036><div class="VPMenu" data-v-44aa6036 data-v-23a1759c><div class="items" data-v-23a1759c><!--[--><!--[--><div class="VPMenuLink" data-v-23a1759c data-v-205ec197><a class="VPLink link vp-external-link-icon" href="https://x.ant.design/index-cn" target="_blank" rel="noreferrer" data-v-205ec197><!--[--><span data-v-205ec197>Ant Design X of React</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-23a1759c data-v-205ec197><a class="VPLink link vp-external-link-icon" href="https://www.antdv.com/components/overview-cn" target="_blank" rel="noreferrer" data-v-205ec197><!--[--><span data-v-205ec197>Ant Design Vue</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ffb6a34d data-v-ba352aa2><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-ba352aa2 data-v-fecd86b4 data-v-4f1e0018><span class="check" data-v-4f1e0018><span class="icon" data-v-4f1e0018><!--[--><span class="vpi-sun sun" data-v-fecd86b4></span><span class="vpi-moon moon" data-v-fecd86b4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ffb6a34d data-v-1bcdcf74 data-v-7acc1133><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzc520pyfm/ant-design-x-vue" aria-label="github" target="_blank" rel="noopener" data-v-7acc1133 data-v-97c6b96e><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-ffb6a34d data-v-ae934832 data-v-44aa6036><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-44aa6036><span class="vpi-more-horizontal icon" data-v-44aa6036></span></button><div class="menu" data-v-44aa6036><div class="VPMenu" data-v-44aa6036 data-v-23a1759c><!----><!--[--><!--[--><!----><div class="group" data-v-ae934832><div class="item appearance" data-v-ae934832><p class="label" data-v-ae934832>Appearance</p><div class="appearance-action" data-v-ae934832><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="true" data-v-ae934832 data-v-fecd86b4 data-v-4f1e0018><span class="check" data-v-4f1e0018><span class="icon" data-v-4f1e0018><!--[--><span class="vpi-sun sun" data-v-fecd86b4></span><span class="vpi-moon moon" data-v-fecd86b4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-ae934832><div class="item social-links" data-v-ae934832><div class="VPSocialLinks social-links-list" data-v-ae934832 data-v-7acc1133><!--[--><a class="VPSocialLink no-icon" href="https://github.com/wzc520pyfm/ant-design-x-vue" aria-label="github" target="_blank" rel="noopener" data-v-7acc1133 data-v-97c6b96e><span class="vpi-social-github"></span></a>
25<!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ffb6a34d data-v-89874f16><span class="container" data-v-89874f16><span class="top" data-v-89874f16></span><span class="middle" data-v-89874f16></span><span class="bottom" data-v-89874f16></span></span></button></div></div></div></div><div class="divider" data-v-ffb6a34d><div class="divider-line" data-v-ffb6a34d></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-553014fb data-v-97d01931><div class="container" data-v-97d01931><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-97d01931><span class="vpi-align-left menu-icon" data-v-97d01931></span><span class="menu-text" data-v-97d01931>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-97d01931 data-v-7cbc86f7><button data-v-7cbc86f7>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-553014fb data-v-b304f0b8><div class="curtain" data-v-b304f0b8></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-b304f0b8><span class="visually-hidden" id="sidebar-aria-label" data-v-b304f0b8> Sidebar Navigation </span><!--[--><!--[--><div style="margin-top:16px;"><div class="ant-descriptions css-13gz7x"><!----><div class="ant-descriptions-view"><table><tbody><!--[--><tr class="ant-descriptions-row"><!--[--><td class="ant-descriptions-item" colspan="3" style=""><div class="ant-descriptions-item-container"><span class="ant-descriptions-item-label" style="">风格偏好</span><span class="ant-descriptions-item-content" style=""><!--[--><button style="background:#424242;" type="button" role="switch" aria-checked="false" class="ant-switch css-13gz7x"><div class="ant-switch-handle"><!----></div><span class="ant-switch-inner"><span class="ant-switch-inner-checked">tsx</span><span class="ant-switch-inner-unchecked">setup</span></span></button><!--]--></span></div></td><!--]--></tr><!--]--></tbody></table></div></div></div><!--]--><!--]--><!--[--><div class="no-transition group" data-v-5ddbaa3e><section class="VPSidebarItem level-0 has-active" data-v-5ddbaa3e data-v-ee2b6304><!----><div class="items" data-v-ee2b6304><!--[--><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/development/introduce'><!--[--><p class="text" data-v-ee2b6304>Ant Design X of Vue</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-ee2b6304 data-v-ee2b6304><div class="item" data-v-ee2b6304><div class="indicator" data-v-ee2b6304></div><a class='VPLink link link' data-v-ee2b6304 href='/development/compatible-style'><!--[--><p class="text" data-v-ee2b6304>样式兼容</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-553014fb data-v-e25e763a><div class="VPDoc has-sidebar has-aside" data-v-e25e763a data-v-7b344cb4><!--[--><!--]--><div class="container" data-v-7b344cb4><div class="aside" data-v-7b344cb4><div class="aside-curtain" data-v-7b344cb4></div><div class="aside-container" data-v-7b344cb4><div class="aside-content" data-v-7b344cb4><div class="VPDocAside" data-v-7b344cb4 data-v-91e68ad3><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-91e68ad3 data-v-62a116a2><div class="content" data-v-62a116a2><div class="outline-marker" data-v-62a116a2></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-62a116a2>On this page</div><ul class="VPDocOutlineItem root" data-v-62a116a2 data-v-3fe61cae><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-91e68ad3></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7b344cb4><div class="content-container" data-v-7b344cb4><!--[--><!--]--><main class="main" data-v-7b344cb4><div style="position:relative;" class="vp-doc _development_introduce" data-v-7b344cb4><div>
25<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="/images/x-logo.svg"><span style="color:rgb(170, 170, 170);font-size:30px;use-select:none;">+</span><img width="160" src="/images/vue.svg"></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><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>
25<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><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>
25<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>
26<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>
27<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>
28<span class="line"></span>
29<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// add the following dependencies</span></span>
30<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>
31<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>
32<span class="line"></span>
33<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>
34<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // ...</span></span>
35<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  plugins: [</span></span>
36<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">    // add the following plugin</span></span>
37<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">    components</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
38<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>
39<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    })</span></span>
40<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  ]</span></span>
41<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});
41</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>
42<span class="line"></span>
43<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// add the following dependencies</span></span>
44<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>
45<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>
46<span class="line"></span>
47<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>
48<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  configureWebpack: {</span></span>
49<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    plugins: [</span></span>
50<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">      // add the following plugin</span></span>
51<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>
52<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>
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;">  }</span></span>
56<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</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>
57<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// auto import equals to</span></span>
58<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// import { Bubble as AXBubble } from &#39;ant-design-x-vue&#39;;</span></span>
59<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>
60<span class="line"></span>
61<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>
62<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>
63<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>
63<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>
64<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
65<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 消息气泡</span></span>
66<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Bubble,</span></span>
67<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">  // 发送框</span></span>
68<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  Sender,</span></span>
69<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">} </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>
70<span class="line"></span>
71<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>
72<span class="line"></span>
73<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>
74<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  {</span></span>
75<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>
76<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>
77<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  },</span></span>
78<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">];</span></span>
79<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>
80<span class="line"></span>
81<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>
82<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>
83<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>
84<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>
84,也推荐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></div></div></main><footer class="VPDocFooter" data-v-7b344cb4 data-v-6f7ccc42><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-6f7ccc42><span class="visually-hidden" id="doc-footer-aria-label" data-v-6f7ccc42>Pager</span><div class="pager" data-v-6f7ccc42><!----></div><div class="pager" data-v-6f7ccc42><a class='VPLink link pager-link next' data-v-6f7ccc42 href='/development/compatible-style'><!--[--><span class="desc" data-v-6f7ccc42>Next page</span><span class="title" data-v-6f7ccc42>样式兼容</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div><!--]--><!--]--><!--]--><!--]--><!--]--></div>
85    
85<script>window.__VP_HASH_MAP__=JSON.parse("{\"component_actions.md\":\"K0JN7tQN\",\"component_attachments.md\":\"CI04dt4x\",\"component_bubble.md\":\"DrHuT89V\",\"component_conversations.md\":\"B2TWBgDS\",\"component_overview.md\":\"Cdt3zuXC\",\"component_prompts.md\":\"BFXYwgwO\",\"component_sender.md\":\"B7b4iENp\",\"component_suggestion.md\":\"CABNwuSs\",\"component_thought-chain.md\":\"BGvHM9_G\",\"component_use-x-agent.md\":\"CDY5-7NC\",\"component_use-x-chat.md\":\"DuN_1WQM\",\"component_welcome.md\":\"DdCOs8Bd\",\"component_x-provider.md\":\"C6HVgb6Z\",\"component_x-request.md\":\"Cg_Zzpy0\",\"component_x-stream.md\":\"BOtlxPIe\",\"development_compatible-style.md\":\"C4RdYGOX\",\"development_introduce.md\":\"DmF3WgSp\",\"index.md\":\"JSi5StAS\",\"playground_copilot.md\":\"DlGG9D37\",\"playground_independent.md\":\"C8NgMNos\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Ant Design X Vue\",\"description\":\"Ant Design X For Vue\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":\"dark\",\"themeConfig\":{\"logo\":\"https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original\",\"nav\":[{\"text\":\"研发\",\"link\":\"/development/introduce\"},{\"text\":\"组件\",\"link\":\"/component/overview\"},{\"text\":\"演示\",\"link\":\"/playground/independent\"},{\"text\":\"更多\",\"items\":[{\"text\":\"Ant Design X of React\",\"link\":\"https://x.ant.design/index-cn\"},{\"text\":\"Ant Design Vue\",\"link\":\"https://www.antdv.com/components/overview-cn\"}]}],\"outline\":[2,3],\"sidebar\":{\"/development\":[{\"text\":\"Ant Design X of Vue\",\"link\":\"/development/introduce\"},{\"text\":\"样式兼容\",\"link\":\"/development/compatible-style\"}],\"/component/\":[{\"text\":\"总览\",\"link\":\"/component/overview\"},{\"text\":\"通用\",\"items\":[{\"text\":\"Bubble 对话气泡框\",\"link\":\"/component/bubble\"},{\"text\":\"Conversations 管理对话\",\"link\":\"/component/conversations\"}]},{\"text\":\"唤醒\",\"items\":[{\"text\":\"Welcome 欢迎\",\"link\":\"/component/welcome\"},{\"text\":\"Prompts 提示集\",\"link\":\"/component/prompts\"}]},{\"text\":\"表达\",\"items\":[{\"text\":\"Sender 输入框\",\"link\":\"/component/sender\"},{\"text\":\"Attachments 输入附件\",\"link\":\"/component/attachments\"},{\"text\":\"Suggestion 快捷指令\",\"link\":\"/component/suggestion\"}]},{\"text\":\"确认\",\"items\":[{\"text\":\"ThoughtChain 思维链\",\"link\":\"/component/thought-chain\"}]},{\"text\":\"反馈\",\"items\":[{\"text\":\"Actions 操作列表\",\"link\":\"/component/actions\"}]},{\"text\":\"工具\",\"items\":[{\"text\":\"useXAgent 模型调度\",\"link\":\"/component/use-x-agent\"},{\"text\":\"useXChat 数据管理\",\"link\":\"/component/use-x-chat\"},{\"text\":\"XStream 流\",\"link\":\"/component/x-stream\"},{\"text\":\"XRequest 请求\",\"link\":\"/component/x-request\"},{\"text\":\"XProvider 全局化配置\",\"link\":\"/component/x-provider\"}]}],\"/playground/\":[{\"text\":\"样板间\",\"items\":[{\"text\":\"独立式\",\"link\":\"/playground/independent\"},{\"text\":\"助手式\",\"link\":\"/playground/copilot\"}]}]},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/wzc520pyfm/ant-design-x-vue\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
85
86    
87  </body>
88</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.