unplugin-auto-import/vite 配置目录

Unplugin-auto-import 是一个 Vite 插件，它可以帮助你在 Vite 项目中自动导入常用的依赖库，如 CSS、TypeScript 类型定义、ESM 模块等。这个插件旨在简化开发者的配置，并提升开发体验。

在使用 Unplugin-auto-import 配置时，主要关注以下几个部分：

1. **安装**：首先在你的 Vite 项目根目录下运行 `npm install unplugin-auto-import@latest` 或 `yarn add unplugin-auto-import` 来安装插件。

2. **配置文件**：Vite 的配置通常在 `.vite` 文件夹下的 `vite.config.js` 中进行。你需要添加 `unplugin` 和 `unplugin-auto-import` 到 `plugins` 数组中，示例如下：

import { defineConfig } from 'vite'
import unpluginAutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    unpluginAutoImport({
      // 可选选项，例如：
      // exclude: '*.svg', // 避免导入 .svg 文件
      // types: true, // 自动导入 TypeScript 类型定义 (.d.ts)
      // esm: true, // 自动导入 ESM 模块
    }),
  ],
})

3. **目录规则**：Unplugin-auto-import 的配置还可以指定哪些目录或文件类型需要自动导入。你可以根据项目需求调整 `include` 和 `exclude` 属性。例如，如果你只希望在 `src/components` 目录下导入 CSS，可以这样设置：

unpluginAutoImport({
  include: ['src/components/**/*.css'],
  exclude: /node_modules/, // 忽略 node_modules 中的文件
})

4. **更新与生效**：保存配置后，Vite 会根据新的 `.viteconfig.js` 内容重新构建，从而应用新的自动导入规则。

相关问题：
1. 如何在 Vite 中全局启用 Unplugin-auto-import？
2. 插件的 exclude 属性可以用来排除哪些类型的文件？
3. Unplugin-auto-import 支持哪些自定义选项来自定义导入行为？