unplugin-auto-import 库作用

1. 基本概念和用途

1.1 自动导入 API

`unplugin - auto - import`是一个用于在 Vue、React 等框架项目中自动导入 API 的工具库。在开发过程中，通常需要频繁地从不同的库中导入各种函数、组件等 API。

例如：在 Vue 3 项目中，经常要导入`ref`、`reactive`等函数，手动导入这些 API 会比较繁琐。`unplugin - auto - import`可以自动帮你完成这些 API 的导入，减少样板代码，提高开发效率。

1.2 支持多种框架和库

它支持多种流行的前端框架和库，如 Vue 3、Vue 2、React、Svelte 等，同时也支持像`lodash`这样的实用工具库。这意味着无论你使用哪种主要的前端技术栈，都可以利用这个库来简化 API 导入的过程。

2. 在 Vue 3 中的使用示例及优势

2.1 安装和配置

安装依赖

npm install -D unplugin - auto - import

在`vite.config.js`（Vite 配置文件）中进行配置。

import { defineConfig } from "vite";import AutoImport from "unplugin - auto - import/vite";export default defineConfig({plugins: [AutoImport({imports: ["vue", "vue - router"],dts: "src/auto - imports.d.ts",}),],});

在这个配置中，`imports`数组指定了要自动导入的库，这里是`vue`和`vue - router`。`dts`选项用于指定自动生成的类型声明文件的路径，这个文件对于 TypeScript 项目很重要，它可以帮助 TypeScript 编译器正确识别自动导入的 API 类型。