unplugin-vue-components 和 unplugin-auto-import

unplugin-vue-components 

插件的作用是自动导入第三方库或组件。

unplugin-auto-import

插件的作用是自动注册项目内的components组件。

使用方法

1.下载包

npm install -D unplugin-vue-components unplugin-auto-import

2.在项目中配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

默认情况下，生成的文件在src同级，如下图所示：

同样也可以指定位置，如下所示：

AutoImport({
      imports: ["vue", "vue-router", "pinia"],
      //第三方组件库的解析器
      resolvers: [ElementPlusResolver()],
      //指定生成文件位置
      dts: "src/auto-imports.d.ts",
}),
Components({
      // dirs 指定组件所在位置，默认为 src/components
      dirs: ['src/components'],
      resolvers: [ElementPlusResolver()],
      dts: "src/components.d.ts",
}),

官网:

https://github.com/unplugin/unplugin-auto-import#configuration

GitHub - unplugin/unplugin-vue-components: 📲 On-demand components auto importing for Vue