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

特性

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

安装

# via npm
npm i @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via yarn
yarn add @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via pnpm
pnpm add @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# via Bun
bun add @tdesign-vue-next/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

使用

Vite

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

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

Rollup

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

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

Webpack

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

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

Rspack

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

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

Vue CLI

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

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

esbuild

// 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-vue-next/auto-import-resolver';

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

选项

library

TDesign 组件库

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

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

resolveIcons

自动引入 tdesign-icons 图标库

• Type： boolean
• Default： false
• Example：

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

esm

导入 esm 版本

• Type： boolean
• Default： false

exclude

设置不自动引入的组件。

• Type： FilterPattern
• Default：
• Example：

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