前言

当我们在Vue项目中使用第三方库或组件时，通常需要手动导入它们并在需要的地方进行注册。这可能会变得繁琐和冗长，特别是当我们使用大量的第三方库或组件时。为了简化这个过程，我们可以使用unplugin-auto-import 和 unplugin-vue-components插件。

插件介绍

unplugin-auto-import 插件的作用是自动导入第三方库或组件。它会根据我们在代码中使用的标识符自动检测并导入相应的库或组件。这样，我们就不需要手动导入它们了。
unplugin-auto-import可用于vue3等插件 hooks 自动引入。

unplugin-vue-components 插件的作用是自动注册Vue组件。它会根据我们在代码中使用的组件标签自动注册相应的组件。这样，我们就不需要在每个页面或组件中手动注册它们了。
unplugin-vue-components 可用于自定义组件、element-plus 组件等的自动引入。

使用

安装

命令如下：

npm install unplugin-auto-import unplugin-vue-components --save-dev
// 或
npm install unplugin-auto-import unplugin-vue-components -D

配置

在配置文件（vue.config.js）中配置插件。可以添加以下代码：

const Components = require('unplugin-vue-components/webpack') 
const AutoImport = require('unplugin-auto-import/webpack') 
const { VarletUIResolver } = require('unplugin-vue-components/resolvers') 
module.exports = {
  configureWebpack: {
    plugins: [
      Components({
        resolvers: [VarletUIResolver()]
      }),
      AutoImport({
        resolvers: [VarletUIResolver({ autoImport: true })]
      })
    ],
  }
}

1. 首先导入 unplugin-auto-import 和 unplugin-vue-components 插件。然后，在 Vue 的配置文件中，将这两个插件添加到插件列表中。
2. 在AutoImport插件的配置中，可以指定需要自动导入的库。上述代码中自动导入了 Varlet。
3. 在Components插件的配置中，可以指定需要自动注册的组件。上述代码中自动导入了 Varlet。
4. 重新启动项目, 插件将会自动检测并导入所需的库,并自动注册所需的组件。

效果展示