unplugin-auto-import 工程项目 import 模块自动导入

渡一（袁老师）视频详解[点击前往]

unplugin-auto-import 是一个用于** Vue 3**（和 Vue 2 的 Composition API）的插件，它可以自动导入你在代码中使用的 Vue Composition API 函数（如 ref, reactive, computed 等）以及来自其他库的函数（如 Vue Router 的 useRoute, useRouter，或者 Pinia 的 defineStore 等）。

这个插件的主要目标是减少样板代码和提高开发效率。当你开始使用** Vue 3** 的 Composition API 或者其他现代库时，你可能会发现你需要在每个组件中导入许多函数。这可能会导致代码变得冗长和难以阅读。unplugin-auto-import 通过自动检测你的代码并为你导入必要的函数来解决这个问题。

如何使用 unplugin-auto-import
安装：
使用 npm 或 yarn 安装 unplugin-auto-import。

bash
npm install unplugin-auto-import --save-dev

或者

yarn add unplugin-auto-import --dev

配置：

在你的 Vite、Vue CLI、Rollup 或其他构建工具的配置文件中，配置 unplugin-auto-import。以下是一个 Vite 的例子：

// javascript
// vite.config.js  
import { defineConfig } from 'vite'  
import AutoImport from 'unplugin-auto-import/vite'  
  
export default defineConfig({  
  plugins: [  
    AutoImport({  
      // 你可以指定要自动导入的库  
      imports: [  
        'vue',  
        'vue-router',  
        // ...其他库  
      ],  
      // 你可以指定要排除的导入  
      eslint: {  
        // 如果你正在使用 ESLint，这个选项将生成相应的 ESLint 规则  
        inheritEnv: true,  
        // 如果你想禁用 ESLint 规则，可以设置为 false  
        // disabled: true,  
      },  
    }),  
    // ...其他插件  
  ],  
})

在代码中使用：
现在，你可以在你的 Vue 组件中直接使用 Vue Composition API 的函数，而无需显式导入它们。

// vue
<template>  
  <div>{{ count }}</div>  
  <button @click="increment">Increment</button>  
</template>  
  
<script setup>  
// 不需要显式导入 ref 或 onMounted  
const count = ref(0)  
const increment = () => {  
  count.value++  
}  
</script>

注意：unplugin-auto-import 还支持 TypeScript，并且可以与 ESLint 集成，以在你不小心显式导入已自动导入的函数时发出警告。