个人建站前端篇（六）插件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 {  const EffectScope: typeof import('vue')['EffectScope']  const computed: typeof import('vue')['computed']  const createApp: typeof import('vue')['createApp']  const customRef: typeof import('vue')['customRef']  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']  const defineComponent: typeof import('vue')['defineComponent']  const effectScope: typeof import('vue')['effectScope']  const getCurrentInstance: typeof import('vue')['getCurrentInstance']  const getCurrentScope: typeof import('vue')['getCurrentScope']  const h: typeof import('vue')['h']  const inject: typeof import('vue')['inject']  const isProxy: typeof import('vue')['isProxy']  const isReactive: typeof import('vue')['isReactive']  const isReadonly: typeof import('vue')['isReadonly']  const isRef: typeof import('vue')['isRef']  const markRaw: typeof import('vue')['markRaw']  const nextTick: typeof import('vue')['nextTick']  const onActivated: typeof import('vue')['onActivated']  const onBeforeMount: typeof import('vue')['onBeforeMount']  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']  const onDeactivated: typeof import('vue')['onDeactivated']  const onErrorCaptured: typeof import('vue')['onErrorCaptured']  const onMounted: typeof import('vue')['onMounted']  const onRenderTracked: typeof import('vue')['onRenderTracked']  const onRenderTriggered: typeof import('vue')['onRenderTriggered']  const onScopeDispose: typeof import('vue')['onScopeDispose']  const onServerPrefetch: typeof import('vue')['onServerPrefetch']  const onUnmounted: typeof import('vue')['onUnmounted']  const onUpdated: typeof import('vue')['onUpdated']  const provide: typeof import('vue')['provide']  const reactive: typeof import('vue')['reactive']  const readonly: typeof import('vue')['readonly']  const ref: typeof import('vue')['ref']  const resolveComponent: typeof import('vue')['resolveComponent']  const shallowReactive: typeof import('vue')['shallowReactive']  const shallowReadonly: typeof import('vue')['shallowReadonly']  const shallowRef: typeof import('vue')['shallowRef']  const toRaw: typeof import('vue')['toRaw']  const toRef: typeof import('vue')['toRef']  const toRefs: typeof import('vue')['toRefs']  const toValue: typeof import('vue')['toValue']  const triggerRef: typeof import('vue')['triggerRef']  const unref: typeof import('vue')['unref']  const useAttrs: typeof import('vue')['useAttrs']  const useCssModule: typeof import('vue')['useCssModule']  const useCssVars: typeof import('vue')['useCssVars']  const useLink: typeof import('vue-router')['useLink']  const useRoute: typeof import('vue-router')['useRoute']  const useRouter: typeof import('vue-router')['useRouter']  const useSlots: typeof import('vue')['useSlots']  const watch: typeof import('vue')['watch']  const watchEffect: typeof import('vue')['watchEffect']  const watchPostEffect: typeof import('vue')['watchPostEffect']  const watchSyncEffect: typeof import('vue')['watchSyncEffect']}// for type re-exportdeclare global {  // @ts-ignore  export 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"],

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