vue使用自动化导入api插件unplugin-auto-import，避免频繁手动导入

大佩梨2025-01-15 9:17

‌unplugin-auto-import‌是一个现代的自动导入插件，旨在简化前端开发中的导入过程，减少手动导入的繁琐工作，提升开发效率。它支持多种构建工具，包括Vite、Webpack、Rollup和esbuild，并且可以与TypeScript配合使用，提供强大的类型系统支持‌。支持自动导入基础库vue、react、pinia、vue router、lodash、axios等等几乎任何JavaScript库或框架中的API，只要符合JavaScript的模块规范。

功能特点

1‌.自动导入常用库的API‌：如Vue、vue-router、@vueuse/core等，减少手动导入的重复工作‌

‌2.支持自定义目录中的函数自动导入‌：可以在配置中指定需要自动导入的目录和文件‌

‌3.生成类型声明文件‌：对于使用TypeScript的项目，可以生成相应的类型声明文件，确保代码的健壮性‌

‌4.生成ESLint配置文件‌：避免未定义变量错误，优化代码质量‌

使用方法
1.‌安装插件‌：使用npm或yarn将unplugin-auto-import安装为开发依赖。

npm install unplugin-auto-import --save-dev
# 或者使用 yarn
yarn add unplugin-auto-import --dev

2.‌在vite.config.js或vite.config.ts配置插件‌：在构建工具的配置文件中添加unplugin-auto-import插件的配置。以下是一个在Vite中使用的例子：

import { defineConfig } from 'vite';
import autoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  plugins: [
    autoImport({
      imports: ['vue'], // 自动导入vue的所有api
    }),
  ],
});

如图（这里我只配置了vue，大家根据需要可添加其他库）：

3.到此完成啦，这样我们开发时就不用在每个文件去引入vue的api，即可进行调用。