526互联

Vue3.2项目构架之unplugin-auto-import自动引入

发布时间 2023-07-11 16:38:43作者: 拨云丶

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'
}