指南
API
示例
指南
API
示例
简体中文

支持的组件库

ew-auto-import-tool 目前支持以下流行的 Vue 组件库的自动导入配置：

Element Plus

Element Plus 是一套基于 Vue 3 的桌面端组件库。

配置示例

1ew-auto-import-tool --library element-plus

生成的配置

1// vite.config.ts
2import { defineConfig } from "vite";
3import vue from "@vitejs/plugin-vue";
4import AutoImport from "unplugin-auto-import/vite";
5import Components from "unplugin-vue-components/vite";
6import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
7
8export default defineConfig({
9  plugins: [
10    vue(),
11    AutoImport({
12      resolvers: [ElementPlusResolver()],
13    }),
14    Components({
15      resolvers: [ElementPlusResolver()],
16    }),
17  ],
18});

Ant Design Vue

Ant Design Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。

配置示例

1ew-auto-import-tool --library ant-design-vue

生成的配置

1// vite.config.ts
2import { defineConfig } from "vite";
3import vue from "@vitejs/plugin-vue";
4import AutoImport from "unplugin-auto-import/vite";
5import Components from "unplugin-vue-components/vite";
6import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
7
8export default defineConfig({
9  plugins: [
10    vue(),
11    AutoImport({
12      resolvers: [AntDesignVueResolver()],
13    }),
14    Components({
15      resolvers: [AntDesignVueResolver()],
16    }),
17  ],
18});

Naive UI

Naive UI 是一个 Vue 3 组件库，使用 TypeScript 编写，快速且轻量。

配置示例

1ew-auto-import-tool --library naive-ui

生成的配置

1// vite.config.ts
2import { defineConfig } from "vite";
3import vue from "@vitejs/plugin-vue";
4import AutoImport from "unplugin-auto-import/vite";
5import Components from "unplugin-vue-components/vite";
6import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
7
8export default defineConfig({
9  plugins: [
10    vue(),
11    AutoImport({
12      resolvers: [NaiveUiResolver()],
13    }),
14    Components({
15      resolvers: [NaiveUiResolver()],
16    }),
17  ],
18});

Vant

Vant 是一个轻量、可靠的移动端 Vue 组件库。

配置示例

1ew-auto-import-tool --library vant

生成的配置

1// vite.config.ts
2import { defineConfig } from "vite";
3import vue from "@vitejs/plugin-vue";
4import AutoImport from "unplugin-auto-import/vite";
5import Components from "unplugin-vue-components/vite";
6import { VantResolver } from "unplugin-vue-components/resolvers";
7
8export default defineConfig({
9  plugins: [
10    vue(),
11    AutoImport({
12      resolvers: [VantResolver()],
13    }),
14    Components({
15      resolvers: [VantResolver()],
16    }),
17  ],
18});

添加更多组件库支持

如果您需要支持其他组件库，可以通过以下方式贡献：

  1. Fork 项目仓库
  2. 在 src/types.ts 中添加新的组件库配置
  3. 提交 Pull Request

我们欢迎社区贡献，帮助支持更多的组件库！

ON THIS PAGE