# Ant Design X of Vue
`ant-design-x-vue` 是遵循 Ant Design 设计体系的一个 Vue UI 库,是 `@ant-design/x` 的 Vue 实现,用于构建由 AI 驱动的界面,一键接入智能对话组件与 API 服务。
+
---
## ✨ 特性
- 🌈 基于 RICH 交互范式,提供卓越的 AI 交互体验
- 🧩 覆盖绝大部分 AI 对话场景,助力快速构建个性化 AI 交互页面
- ⚡ 轻松对接符合 OpenAI 标准的模型推理服务
- 🔄 提供好用的数据流管理功能,让开发更高效
- 📦 提供多种模板,快速启动 LUI 应用开发
- 🛡 采用 TypeScript 开发,提供完整类型支持,提升开发体验与可靠性
- 🎨 支持细粒度的样式调整,满足各种场景的个性化需求
## 安装
### 使用 npm 或 yarn 或 pnpm 或 bun 安装
::: code-group
```sh [npm]
$ npm install ant-design-x-vue --save
```
```sh [pnpm]
$ pnpm install ant-design-x-vue --save
```
```sh [yarn]
$ yarn add ant-design-x-vue
```
```sh [bun]
$ bun add ant-design-x-vue
```
:::
### 浏览器引入
在浏览器中使用 `script` 和 `link` 标签直接引入文件,并使用全局变量 `antdx`。
你可以通过 [](https://www.jsdelivr.com/package/npm/ant-design-x-vue) 进行下载。
### 自动导入
在项目中自动导入组件,需要使用 `unplugin-vue-components` 插件,如果未安装,你可以通过以下命令安装:
::: code-group
```sh [npm]
$ npm install unplugin-vue-components -D
```
```sh [pnpm]
$ pnpm install unplugin-vue-components -D
```
```sh [yarn]
$ yarn add unplugin-vue-components -D
```
```sh [bun]
$ bun add unplugin-vue-components -d
```
:::
在 `Vite` 或 `Webpack` 的配置文件中,添加以下依赖和插件:
::: code-group
```js [vite.config.js]
// 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()]
})
]
});
```
```js [webpack.config.js]
// 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](https://github.com/unplugin/unplugin-vue-components#installation)
在项目中,以 `AX` 开头的组件,将被自动解析为 `ant-design-x-vue` 组件并导入到文件中,你可以直接在模板中使用它们:
```html
```
## 🧩 原子组件
我们基于 RICH 交互范式,在不同的交互阶段提供了大量的原子组件,帮助你灵活搭建你的 AI 对话应用:
- 通用: `Bubble` - 消息气泡、`Conversations` - 会话管理
- 唤醒: `Welcome` - 欢迎、`Prompts` - 提示集
- 表达: `Sender` - 发送框、`Attachment` - 附件、`Suggestion` - 快捷指令
- 确认: `ThoughtChain` - 思维链
下面是使用原子组件搭建一个最简单的对话框的代码示例:
```vue
```
这里有一个基本的示例项目,你可以参考:[Example project](https://github.com/wzc520pyfm/ant-design-x-vue/tree/main/play)
::: warning
文档中 tsx 风格的代码示例采用 [`defineRender`](https://vue-macros.dev/zh-CN/macros/define-render.html) 编写,要运行它们,你还需要集成 [`Vue Macros`](https://vue-macros.dev/zh-CN/guide/bundler-integration.html).
Vue模板风格的示例代码在逐步更新中,你可以在左上角将 **风格偏好** 切换至 `setup` 预览。
:::