vue 自动导入unplugin-auto-import

 

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，这个文件是自动管理的，你通常不需要关心它的具体内容。