在vue3中配置unplugin-auto-import

### 配置 `unplugin-auto-import` 插件

为了在 Vue 3 项目中配置 `unplugin-auto-import` 插件，可以按照以下方法操作：

#### 安装依赖包
首先安装必要的 npm 包。这包括 `unplugin-auto-import` 和其 Vite 或 Webpack 特定版本的适配器之一。

npm install unplugin-auto-import vite-plugin-vue @vue/compiler-sfc --save-dev

对于使用 Vite 的 Vue 3 项目来说，上述命令会安装所需的工具集；如果是在其他构建环境下，则应替换相应的打包工具插件部分。

#### 修改配置文件
接着修改项目的构建配置文件（通常是 `vite.config.ts` 或者 `webpack.config.js`），加入该插件的支持并指定自动导入的内容范围。

针对 Vite 用户，在 `vite.config.ts` 中添加如下代码片段[^1]:

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

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue'],
      dts: 'src/auto-imports.d.ts', // 可选：生成 TypeScript 声明文件的位置
    }),
  ],
})

这段脚本启用了 `AutoImport` 功能，并指定了要自动加载的对象列表以及可选项中的类型声明输出路径。

#### 使用自动生成的功能
完成以上设置之后，无需手动引入即可直接访问所列模块内的成员变量或函数。例如可以直接书写 `<script setup>` 组件而不需要显式地写入 `import { ref, reactive } from 'vue'` 这样的语句来获取响应式的 API 接口。