ant-design-x-vue
是遵循 Ant Design 设计体系的一个 Vue UI 库,是 @ant-design/x
的 Vue 实现,用于构建由 AI 驱动的界面,一键接入智能对话组件与 API 服务。
::: code-group
$ npm install ant-design-x-vue --save
$ pnpm install ant-design-x-vue --save
$ yarn add ant-design-x-vue
$ bun add ant-design-x-vue
:::
在浏览器中使用 script
和 link
标签直接引入文件,并使用全局变量 antdx
。
在项目中自动导入组件,需要使用 unplugin-vue-components
插件,如果未安装,你可以通过以下命令安装:
::: code-group
$ npm install unplugin-vue-components -D
$ pnpm install unplugin-vue-components -D
$ yarn add unplugin-vue-components -D
$ bun add unplugin-vue-components -d
:::
在 Vite
或 Webpack
的配置文件中,添加以下依赖和插件:
::: code-group
// vite.config.js
import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';
// add the following dependencies
import components from 'unplugin-vue-components/vite';
import { AntDesignXVueResolver } from 'ant-design-x-vue/resolver';
export default defineConfig({
// ...
plugins: [
// add the following plugin
components({
resolvers: [AntDesignXVueResolver()]
})
]
});
// webpack.config.js
// add the following dependencies
const Components = require('unplugin-vue-components/webpack');
const { AntDesignXVueResolver } = require('ant-design-x-vue/resolver');
module.exports = {
configureWebpack: {
plugins: [
// add the following plugin
Components.default({
resolvers: [AntDesignXVueResolver()]
})
]
}
};
:::
更多打包工具的示例,可以参考 unplugin-vue-components
在项目中,以 AX
开头的组件,将被自动解析为 ant-design-x-vue
组件并导入到文件中,你可以直接在模板中使用它们:
<script setup>
// auto import equals to
// import { Bubble as AXBubble } from 'ant-design-x-vue';
</script>
<template>
<AXBubble content="Hello AI" />
</template>
我们基于 RICH 交互范式,在不同的交互阶段提供了大量的原子组件,帮助你灵活搭建你的 AI 对话应用:
Bubble
- 消息气泡、Conversations
- 会话管理Welcome
- 欢迎、Prompts
- 提示集Sender
- 发送框、Attachment
- 附件、Suggestion
- 快捷指令ThoughtChain
- 思维链下面是使用原子组件搭建一个最简单的对话框的代码示例:
<script setup lang="ts">
import {
// 消息气泡
Bubble,
// 发送框
Sender,
} from 'ant-design-x-vue';
defineOptions({ name: 'SampleChat' });
const messages = [
{
content: 'Hello, Ant Design X Vue!',
role: 'user',
},
];
</script>
<template>
<Bubble.List :items="messages" />
<Sender />
</template>
这里有一个基本的示例项目,你可以参考:Example project
::: warning
文档中 tsx 风格的代码示例采用 defineRender
编写,要运行它们,你还需要集成 Vue Macros
.
Vue模板风格的示例代码在逐步更新中,你可以在左上角将 风格偏好 切换至 setup
预览。
:::