【插件推荐】vue3自动导入unplugin-auto-import

unplugin-auto-import 是一个用于 Vue 3 的自动导入 Vue 相关导出的插件，它能够帮助你减少重复的 import {...} from 'vue' 代码。

以下是如何使用 unplugin-auto-import 的示例：

1. 首先，你需要安装这个插件：

npm install -D unplugin-auto-import

2. 接着，你需要在你的 Vue 项目中配置插件。如果你使用的是 Vite，可以在 vite.config.js 或 vite.config.ts 文件中进行配置。如果你使用的是 Webpack，则需要在 webpack 配置文件中进行配置。

以下是在 vite.config.js 中配置 unplugin-auto-import 的示例：

import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],
})

在 AutoImport 配置中，imports 选项指定了哪些库需要自动导入，dts 选项则用于指定生成的类型声明文件的位置。

现在，当你在 Vue 组件中使用 Vue 提供的组件或函数时，无需显式导入，插件会自动帮你完成这一步。例如，你可以直接在组件中使用 ref 而不需要导入它：

<script setup>
const count = ref(0)
</script>

这就是如何使用 unplugin-auto-import 的基本方法。记得在实际项目中根据具体情况进行相应的配置。