个人建站前端篇（六）插件unplugin-auto-import的使用

vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入
*

unplugin-auto-import
解决了vue3-hook、vue-router、useVue等多个插件的自动导入，也支持自定义插件的自动导入，是一个功能强大的typescript支持工具

一、安装依赖

npm i unplugin-auto-import-D

二、在vite.config.ts文件中添加配置

plugins:[vue(),eslintPlugin(),AutoImport({imports:["vue","vue-router"],dts:'src/auto-import.d.ts',// 路径下自动生成文件夹存放全局指令})],

三、在src目录下自动生成auto-import.d.ts文件，用于存放全局指令

/* eslint-disable *//* prettier-ignore */// @ts-nocheck// noinspection JSUnusedGlobalSymbols// Generated by unplugin-auto-importexport{}
declare global {constEffectScope:typeofimport('vue')['EffectScope']constcomputed:typeofimport('vue')['computed']constcreateApp:typeofimport('vue')['createApp']constcustomRef:typeofimport('vue')['customRef']constdefineAsyncComponent:typeofimport('vue')['defineAsyncComponent']constdefineComponent:typeofimport('vue')['defineComponent']consteffectScope:typeofimport('vue')['effectScope']constgetCurrentInstance:typeofimport('vue')['getCurrentInstance']constgetCurrentScope:typeofimport('vue')['getCurrentScope']consth:typeofimport('vue')['h']constinject:typeofimport('vue')['inject']constisProxy:typeofimport('vue')['isProxy']constisReactive:typeofimport('vue')['isReactive']constisReadonly:typeofimport('vue')['isReadonly']constisRef:typeofimport('vue')['isRef']constmarkRaw:typeofimport('vue')['markRaw']constnextTick:typeofimport('vue')['nextTick']constonActivated:typeofimport('vue')['onActivated']constonBeforeMount:typeofimport('vue')['onBeforeMount']constonBeforeRouteLeave:typeofimport('vue-router')['onBeforeRouteLeave']constonBeforeRouteUpdate:typeofimport('vue-router')['onBeforeRouteUpdate']constonBeforeUnmount:typeofimport('vue')['onBeforeUnmount']constonBeforeUpdate:typeofimport('vue')['onBeforeUpdate']constonDeactivated:typeofimport('vue')['onDeactivated']constonErrorCaptured:typeofimport('vue')['onErrorCaptured']constonMounted:typeofimport('vue')['onMounted']constonRenderTracked:typeofimport('vue')['onRenderTracked']constonRenderTriggered:typeofimport('vue')['onRenderTriggered']constonScopeDispose:typeofimport('vue')['onScopeDispose']constonServerPrefetch:typeofimport('vue')['onServerPrefetch']constonUnmounted:typeofimport('vue')['onUnmounted']constonUpdated:typeofimport('vue')['onUpdated']constprovide:typeofimport('vue')['provide']constreactive:typeofimport('vue')['reactive']constreadonly:typeofimport('vue')['readonly']constref:typeofimport('vue')['ref']constresolveComponent:typeofimport('vue')['resolveComponent']constshallowReactive:typeofimport('vue')['shallowReactive']constshallowReadonly:typeofimport('vue')['shallowReadonly']constshallowRef:typeofimport('vue')['shallowRef']consttoRaw:typeofimport('vue')['toRaw']consttoRef:typeofimport('vue')['toRef']consttoRefs:typeofimport('vue')['toRefs']consttoValue:typeofimport('vue')['toValue']consttriggerRef:typeofimport('vue')['triggerRef']constunref:typeofimport('vue')['unref']constuseAttrs:typeofimport('vue')['useAttrs']constuseCssModule:typeofimport('vue')['useCssModule']constuseCssVars:typeofimport('vue')['useCssVars']constuseLink:typeofimport('vue-router')['useLink']constuseRoute:typeofimport('vue-router')['useRoute']constuseRouter:typeofimport('vue-router')['useRouter']constuseSlots:typeofimport('vue')['useSlots']constwatch:typeofimport('vue')['watch']constwatchEffect:typeofimport('vue')['watchEffect']constwatchPostEffect:typeofimport('vue')['watchPostEffect']constwatchSyncEffect:typeofimport('vue')['watchSyncEffect']}// for type re-export
declare global {// @ts-ignoreexport type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef }from'vue'import('vue')}

四、运行项目、和eslintrc产生冲突，解决方法如下

在vite.config.ts中补充配置

plugins:[vue(),eslintPlugin(),AutoImport({imports:["vue","vue-router"],dts:'src/auto-import.d.ts',// 路径下自动生成文件夹存放全局指令eslintrc:{enabled:true,// 1、改为true用于生成eslint配置。2、生成后改回false，避免重复生成消耗}})]

这里自动生成.eslintrc-auto-import.json配置文件，最后在.eslintrc.json中加入配置

"extends":["./.eslintrc-auto-import.json"]

五、tsconfig.json文件中添加如下配置：

"include":["src/**/*.ts","src/**/*.tsx","src/**/*.vue","src/auto-imports.d.ts"],

这样重新启动项目就可以正常使用了