unplugin-auto-import 简介
unplugin-auto-import 是一个用于自动导入常用函数和变量的 Vite 和 Webpack 插件。它可以帮助开发者减少手动导入的麻烦，提高开发效率。
安装
使用 npm 或 yarn 安装：
npm install -D unplugin-auto-import
或
yarn add -D unplugin-auto-import
配置
Vite 配置
在 vite.config.js 中配置插件：
import AutoImport from 'unplugin-auto-import/vite';
export default {
plugins: [
AutoImport({
imports: [
'vue',
'vue-router',
// 可以添加其他库，例如 'react'
],
dts: true, // 生成 TypeScript 声明文件
}),
],
};
Webpack 配置
在 webpack.config.js 中配置插件：
import AutoImport from 'unplugin-auto-import/webpack';
export default {
plugins: [
AutoImport({
imports: [
'vue',
'vue-router',
],
dts: true,
}),
],
};
使用
配置完成后，您可以直接在代码中使用这些自动导入的函数，无需手动导入。例如：
<template>
<div>{{ count }}</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
生成类型声明
设置 dts: true 后，插件会自动生成 auto-imports.d.ts 文件，方便 TypeScript 用户使用。
自定义导入
您可以自定义导入函数和库，例如：
AutoImport({
imports: [
{
vue: ['ref', 'reactive'], // 只导入这两个
'lodash-es': ['cloneDeep'], // 从 lodash-es 中导入 cloneDeep
},
],
});
使用示例
以下是一个完整的 Vite + Vue 3 项目示例。
npm create vite@latest my-app --template vue
cd my-app
npm install
npm install -D unplugin-auto-import
然后在 vite.config.js 中添加插件配置：
import { defineConfig } from 'vite';
import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
plugins: [
AutoImport({
imports: ['vue', 'vue-router'],
dts: true,
}),
],
});
在组件中，您可以直接使用 ref 和 reactive，无需导入：
<template>
<div>{{ count }}</div>
<button @click="increment">Increment</button>
</template>
<script setup>
const count = ref(0);
const increment = () => {
count.value++;
};
</script>
小结
- 自动导入：简化了代码编写，避免了手动导入。
- TypeScript 支持：通过
dts选项生成类型声明，提升开发体验。 - 灵活配置：可以自定义导入的库和函数，满足不同需求。