unplugin-auto-import 是一個(gè)流行的 JavaScript/TypeScript 插件，可以自動導(dǎo)入常用的庫、API 或自定義函數(shù)，減少手動書寫 import 語句的繁瑣操作。它常用于 Vue、React 等框架，幫助開發(fā)者提高效率和減少樣板代碼。

核心功能：

1. 自動導(dǎo)入：
   • 無需手動編寫 import 語句，代碼中直接使用目標(biāo)函數(shù)或 API 即可。
2. 高度自定義：
   • 可以根據(jù)項(xiàng)目需求指定需要自動導(dǎo)入的庫、API 或函數(shù)。
3. 支持 Tree-Shaking：
   • 未使用的導(dǎo)入會在構(gòu)建過程中自動移除，確保最終打包體積最小化。
4. 框架無關(guān)：
   • 適用于 Vue、React 或純 JavaScript/TypeScript 項(xiàng)目。
5. TypeScript 支持：
   • 自動生成類型聲明文件，提供更好的類型檢查和開發(fā)體驗(yàn)。

在 Vue 項(xiàng)目中的使用示例

1. 安裝插件：

npm install -D unplugin-auto-import

2. 在 vite.config.ts 中配置：

import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [AutoImport({imports: ['vue', // 自動導(dǎo)入 Vue 的 API，比如 ref、reactive 等'vue-router', // 自動導(dǎo)入 Vue Router 的方法'uni-app'],dts: 'src/auto-imports.d.ts', // 生成類型聲明文件}),],
})

3. 無需手動導(dǎo)入： 配置完成后，可以直接在代碼中使用函數(shù)，無需顯式導(dǎo)入:

<script setup>
const count = ref(0)const increment = () => {count.value++
}
</script>

4. 生成的類型聲明文件： 配置中的 dts 文件會自動生成對應(yīng)的類型定義，確保在 TypeScript 項(xiàng)目中也能獲得自動補(bǔ)全和類型檢查功能。

優(yōu)勢：

• 節(jié)省時(shí)間： 不需要重復(fù)書寫導(dǎo)入語句。
• 減少錯(cuò)誤： 不會因?yàn)橥泴?dǎo)入某些函數(shù)而報(bào)錯(cuò)。
• 代碼更簡潔： 專注于邏輯實(shí)現(xiàn)，避免大量樣板代碼。