vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入
1、安装
npm i -D unplugin-auto-import
2、在vite.config.ts中引入
import AutoImport from 'unplugin-auto-import/vite'
并在plugins中配置：
export default defineConfig({
plugins: [
......
AutoImport({
imports: ['vue'],
dts: 'src/auto-import.d.ts',
})
]
}）
dts：true 或者为 'src/components.d.ts'时，则会自动生成components.d.ts文件components.d.ts：**.d.ts为全局声明文件，包含了按需导入的组件的声明。
auto-imports.d.ts列出按需自动导入的api的声明
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const api: typeof import('@/api/index')
const computed: typeof import('vue')['computed']
const createApp: typeof import('vue')['createApp']
const createPinia: typeof import('pinia')['createPinia']
const customRef: typeof import('vue')['customRef']
...
}
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
auto-imports.d.ts 文件是一个类型定义文件，用于TypeScript项目中。这个文件通常是由一些现代前端开发工具和框架自动生成的，比如Vite、Vue CLI或其他支持自动导入功能的工具。它的主要目的是提供一个类型声明环境，使得在你的项目中自动导入的变量、函数、组件等能够被TypeScript正确识别，从而提供类型检查和智能提示。
文件功能：
自动导入识别：当你使用了如Vue或React等框架的某些特性时（比如Vue的Composition API、React的Hooks等），这些特性可能会自动导入到你的项目中。auto-imports.d.ts 文件帮助TypeScript理解这些自动导入的元素，即使你在代码中没有显式导入它们。
编辑器支持：该文件还帮助编辑器（如VS Code）提供自动完成、代码高亮和其他智能提示功能。
示例：
假设你正在使用Vue 3和Vite，项目中可能会自动生成一个auto-imports.d.ts文件，内容大致如下：
// auto-imports.d.ts
declare module 'vue' {
export function ref<T>(value: T): Ref<T>
// ...其他自动导入的API...
}
在这个例子中，auto-imports.d.ts 告诉TypeScript，即使你没有在你的组件中显式导入ref函数，它也是可用的，并且提供了关于ref函数的类型信息。
注意事项：
这个文件通常不需要手动修改。它由工具自动生成，并根据项目的使用情况进行更新。
如果你在使用相关的框架或工具，而且启用了TypeScript，这个文件是自动管理的，你通常不需要关心它的具体内容。