Vite+vue3项目中unplugin-auto-import的作用和使用方法详解

一、unplugin-auto-import 的作用

unplugin-auto-import 是一个用于自动导入 JavaScript/TypeScript 模块的工具。在 Vue 3 项目中，它可以帮助开发者自动导入常用的 API（如 Vue 的 ref、computed 等），减少手动导入的繁琐操作，提升开发效率。

主要功能：

1. 自动导入常用 API ：自动导入 Vue 3 的 Composition API（如 ref、reactive、computed 等）或其他常用库的 API。
2. 减少代码冗余：避免在每个文件中重复导入相同的模块。
3. 支持 TypeScript：自动生成类型声明文件，确保 TypeScript 类型检查正常。
4. 插件化：作为 Vite 插件使用，配置简单，易于集成。

---

二、unplugin-auto-import 的安装

在 Vite + Vue 3 项目中安装 unplugin-auto-import：

npm install unplugin-auto-import -D

或者使用 Yarn：

yarn add unplugin-auto-import -D

---

三、unplugin-auto-import 的配置

在 vite.config.ts 或 vite.config.js 中配置 unplugin-auto-import。

1. 基本配置

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive, computed 等
      imports: ['vue'],
      // 生成自动导入的 TypeScript 声明文件
      dts: 'src/auto-imports.d.ts',
    }),
  ],
});

2. 配置说明

• imports : 指定需要自动导入的模块。例如：
  • ['vue']：自动导入 Vue 3 的 Composition API。
  • ['vue-router']：自动导入 Vue Router 的 API。
  • ['pinia']：自动导入 Pinia 的 API。
• dts: 生成 TypeScript 声明文件的路径。如果不使用 TypeScript，可以省略此配置。
• eslintrc: 生成 ESLint 配置，避免 ESLint 报错（可选）。

3. 高级配置

如果需要自动导入更多库或自定义规则，可以扩展配置：

AutoImport({
  imports: [
    'vue',
    'vue-router',
    'pinia',
    {
      // 自定义导入
      axios: [
        // 默认导入为 axios
        ['default', 'axios'],
      ],
    },
  ],
  dts: 'src/auto-imports.d.ts',
  eslintrc: {
    enabled: true, // 生成 .eslintrc-auto-import.json 文件
  },
});

---

四、使用示例

配置完成后，在项目中可以直接使用 Vue 3 的 API，而无需手动导入。

示例代码

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
// 无需手动导入 ref 和 computed
const count = ref(0);
const increment = () => count.value++;
</script>

生成的 auto-imports.d.ts

在 src/auto-imports.d.ts 中会生成如下类型声明：

// Generated by 'unplugin-auto-import'
export {}
declare global {
  const ref: typeof import('vue')['ref'];
  const computed: typeof import('vue')['computed'];
  const reactive: typeof import('vue')['reactive'];
  // 其他自动导入的 API
}

---

五、注意事项

1. ESLint 配置：

   • 如果项目中使用了 ESLint，可能会因为未导入的 API 而报错。可以通过配置 eslintrc.enabled: true 生成 .eslintrc-auto-import.json 文件，并在 ESLint 配置中引入：

     {
       "extends": ["./.eslintrc-auto-import.json"]
     }

2. TypeScript 支持：

   • 确保 tsconfig.json 中包含生成的 auto-imports.d.ts 文件：

     {
       "include": ["src/**/*", "src/auto-imports.d.ts"]
     }

3. 自定义导入：

   • 如果需要自动导入其他库（如 Lodash、Axios 等），可以在 imports 中配置。

---

六、总结

unplugin-auto-import 是一个非常实用的工具，特别适合在 Vue 3 项目中使用。它可以显著减少手动导入的工作量，提升开发效率。通过简单的配置，即可实现自动导入 Vue 3 的 Composition API 或其他常用库的 API，同时支持 TypeScript 和 ESLint，确保代码的规范性和类型安全。