---
url: /guide/with-ui-libraries.md
---
# 搭配 UI 组件库

## 预设 UI 组件库

框架已为你集成好了以下 UI 组件库的工程，开箱即用，分别在 `apps/` 目录下的不同应用内：

* `core-ant-design-vue` - [Ant Design Vue](https://www.antdv.com/)
* `core-antdv-next` - [Antdv Next](https://www.antdv-next.com/)
* `core-arco-design-vue` - [Arco Design Vue](https://arco.design/vue/)
* `core-element-plus` - [Element Plus](https://element-plus.org/)
* `core-naive-ui` - [Naive UI](https://www.naiveui.com/)
* `core-tdesign` - [Tdesign](https://tdesign.tencent.com/vue-next/)
* `core-vexip-ui` - [Vexip UI](https://www.vexipui.com/)

## 接入其他 UI 组件库

如果你需要使用的 UI 组件库不在其中，也可以参考以下步骤自行接入其他 UI 组件库。

### 1. 复制 `core` 应用

复制 `apps/core` 应用，同时修改 `apps/<app>/package.json` 中 `name` 属性。

### 2. 修改 `apps/<app>/src/ui/provider` 目录

这个目录是框架对接 UI 组件库的统一入口，一共只有 2 个文件：

* `index.ts`：负责安装 UI 组件库，如果是专业版，并且组件库支持国际化，还需要导出该组件库的语言包映射
* `index.vue`：负责在根组件外层包裹全局 Provider，并把框架的主题、语言等状态同步给 UI 组件库

框架之所以能方便切换 UI 组件库，核心原因就在这里：

* `main.ts` 中通过 `app.use(uiProvider)` 安装 UI 组件库
* `App.vue` 中通过 `<Provider>` 包裹整棵应用

因此大多数情况下，你只需要改这两个文件，`main.ts` 和 `App.vue` 本身不需要动。