tdesign-uniapp-auto-import-resolver 是 unplugin-vue-components 的一个解析器，用于实现 TDesign 按需引入。

$3

- 支持 Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild 等

$3

``shell


via npm

npm i tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D

via yarn

yarn add tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D

via pnpm

pnpm add tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D

via Bun

bun add tdesign-uniapp-auto-import-resolver unplugin-vue-components unplugin-auto-import -D
`

使用

$3

`ts
// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { TDesignResolver } from 'tdesign-uniapp-auto-import-resolver';

export default defineConfig({
plugins: [
AutoImport({
resolvers: [TDesignResolver()],
}),
Components({
resolvers: [TDesignResolver()],
}),
],
});
`

$3

`ts
// rollup.config.js
import AutoImport from 'unplugin-auto-import/rollup';
import Components from 'unplugin-vue-components/rollup';
import { TDesignResolver } from 'tdesign-uniapp-auto-import-resolver';

export default {
plugins: [
AutoImport({
resolvers: [TDesignResolver()],
}),
Components({
resolvers: [TDesignResolver()],
}),
],
};
`

$3

`ts
// webpack.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { TDesignResolver } from 'tdesign-uniapp-auto-import-resolver';

module.exports = {
plugins: [
AutoImport({
resolvers: [TDesignResolver()],
}),
Components({
resolvers: [TDesignResolver()],
}),
],
};
`

$3

`ts
// rspack.config.js
import AutoImport from 'unplugin-auto-import/rspack';
import Components from 'unplugin-vue-components/rspack';
import { TDesignResolver } from 'tdesign-uniapp-auto-import-resolver';

module.exports = {
plugins: [
AutoImport({
resolvers: [TDesignResolver()],
}),
Components({
resolvers: [TDesignResolver()],
}),
],
};
`

$3

`ts
// vue.config.js
import AutoImport from 'unplugin-auto-import/webpack';
import Components from 'unplugin-vue-components/webpack';
import { TDesignResolver } from 'tdesign-uniapp-auto-import-resolver';

module.exports = {
configureWebpack: {
plugins: [
AutoImport({
resolvers: [TDesignResolver()],
}),
Components({
resolvers: [TDesignResolver()],
}),
],
},
};
`

$3

`ts
// esbuild.config.js
import { build } from 'esbuild';
import AutoImport from 'unplugin-auto-import/esbuild';
import Components from 'unplugin-vue-components/esbuild';
import { TDesignResolver } from 'tdesign-uniapp-auto-import-resolver';

build({
plugins: [
AutoImport({
resolvers: [TDesignResolver()],
}),
Components({
resolvers: [TDesignResolver()],
}),
],
});
`

选项

$3

TDesign 组件库

- Type： 'vue' | 'vue-next' | 'mobile-vue' | 'chat'
- Default： uniapp
- Example：

`ts
Components({
resolvers: [
TDesignResolver({
library: 'vue-next',
}),
],
});
`

$3

自动引入 tdesign-icons 图标库

- Type： boolean
- Default： false
- Example：

`ts
Components({
resolvers: [
TDesignResolver({
resolveIcons: true,
}),
],
});
`

$3

导入 esm 版本

- Type： boolean
- Default： false

$3

设置不自动引入的组件。

- Type： FilterPattern
- Default：
- Example：

`ts
Components({
resolvers: [
TDesignResolver({
exclude: ['TButton'],
}),
],
});
``