山东省住房与建设厅网站首页,个人简历制作,wordpress 小清新,环保部网站建设项目验收方案vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦#xff0c;可以通过unplugin-auto-import给我们自动引入 * unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入#xff0c;也支持自定义插件的自动导入#xff0c;是一个功能强大的typ…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-import
export {}
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-export
declare global {// ts-ignoreexport type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from vueimport(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],这样重新启动项目就可以正常使用了
