On-demand components auto importing for series of TDesign UniApp
npm install tdesign-uniapp-auto-import-resolvertdesign-uniapp-auto-import-resolver 是 unplugin-vue-components 的一个解析器,用于实现 TDesign 按需引入。
- 支持 Vite, Webpack, Rspack, Vue CLI, Rollup, esbuild 等
``shellvia npm
npm i 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'],
}),
],
});
``