unplugin-auto-import 简介

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 选项生成类型声明，提升开发体验。
• 灵活配置：可以自定义导入的库和函数，满足不同需求。