Vite使用unplugin-auto-import实现vue3中的自动导入
作者:胖蔡
本文主要介绍了Vite使用unplugin-auto-import实现vue3中的自动导入,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
unplugin-auto-import
是基于 unplugin 写的,支持 Vite、Webpack、Rollup、esbuild
多个打包工具。我们可以使用unplugin-auto-import实现依赖的自动导入,不用再频繁导入依赖包,从而提交我们的开发效率。如下,以vue3+vite
中使用改插件为例。
安装
使用前我们需要先安装该依赖:
$ pnpm i unplugin-auto-import -D
配置
安装好依赖后,我们就可以在vite
中配置改插件了,其在vite中的配置方法如下:
// vite.config.ts import AutoImport from 'unplugin-auto-import/vite' export default defineConfig({ plugins: [ AutoImport({ imports: [ 'vue', 'vue-router', 'vue-i18n', '@vueuse/core', 'pinia', ], dts: 'types/auto-imports.d.ts', // 使用typescript,需要指定生成对应的d.ts文件或者设置为true,生成默认导入d.ts文件 dirs: ['src/stores', 'src/composables', 'src/hooks'], }), ], })
如上就配置好了一个自动导入的插件,我们通过AutoImport插件实现了初始化导入vue、vue-router等依赖库,设置本地项目自动导入路径。其生成的声明文件如下:
/* 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 computedAsync: typeof import('@vueuse/core')['computedAsync'] const computedEager: typeof import('@vueuse/core')['computedEager'] const computedInject: typeof import('@vueuse/core')['computedInject'] const computedWithControl: typeof import('@vueuse/core')['computedWithControl'] const controlledComputed: typeof import('@vueuse/core')['controlledComputed'] const controlledRef: typeof import('@vueuse/core')['controlledRef'] const createApp: typeof import('vue')['createApp'] const createEventHook: typeof import('@vueuse/core')['createEventHook'] const createGlobalState: typeof import('@vueuse/core')['createGlobalState'] const createInjectionState: typeof import('@vueuse/core')['createInjectionState'] const createPinia: typeof import('pinia')['createPinia'] const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn'] const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate'] const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable'] const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise'] const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn'] const customRef: typeof import('vue')['customRef'] const debouncedRef: typeof import('@vueuse/core')['debouncedRef'] const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch'] const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'] const defineComponent: typeof import('vue')['defineComponent'] const defineStore: typeof import('pinia')['defineStore'] const eagerComputed: typeof import('@vueuse/core')['eagerComputed'] const effectScope: typeof import('vue')['effectScope'] const extendRef: typeof import('@vueuse/core')['extendRef'] const getActivePinia: typeof import('pinia')['getActivePinia'] const getCurrentInstance: typeof import('vue')['getCurrentInstance'] const getCurrentScope: typeof import('vue')['getCurrentScope'] const h: typeof import('vue')['h'] const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch'] const inject: typeof import('vue')['inject'] const isDark: typeof import('../src/composables/theme')['isDark'] const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable'] const mapActions: typeof import('pinia')['mapActions'] const mapGetters: typeof import('pinia')['mapGetters'] const mapState: typeof import('pinia')['mapState'] const mapStores: typeof import('pinia')['mapStores'] const mapWritableState: typeof import('pinia')['mapWritableState'] 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 onClickOutside: typeof import('@vueuse/core')['onClickOutside'] const onDeactivated: typeof import('vue')['onDeactivated'] const onErrorCaptured: typeof import('vue')['onErrorCaptured'] const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke'] const onLongPress: typeof import('@vueuse/core')['onLongPress'] 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 onStartTyping: typeof import('@vueuse/core')['onStartTyping'] const onUnmounted: typeof import('vue')['onUnmounted'] const onUpdated: typeof import('vue')['onUpdated'] const pausableWatch: typeof import('@vueuse/core')['pausableWatch'] const preferredLanguages: typeof import('../src/composables/i18n-locale')['preferredLanguages'] const provide: typeof import('vue')['provide'] const reactify: typeof import('@vueuse/core')['reactify'] const reactifyObject: typeof import('@vueuse/core')['reactifyObject'] const reactive: typeof import('vue')['reactive'] const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed'] const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit'] const reactivePick: typeof import('@vueuse/core')['reactivePick'] const readonly: typeof import('vue')['readonly'] const ref: typeof import('vue')['ref'] const refAutoReset: typeof import('@vueuse/core')['refAutoReset'] const refDebounced: typeof import('@vueuse/core')['refDebounced'] const refDefault: typeof import('@vueuse/core')['refDefault'] const refThrottled: typeof import('@vueuse/core')['refThrottled'] const refWithControl: typeof import('@vueuse/core')['refWithControl'] const resolveComponent: typeof import('vue')['resolveComponent'] const resolveRef: typeof import('@vueuse/core')['resolveRef'] const resolveUnref: typeof import('@vueuse/core')['resolveUnref'] const setActivePinia: typeof import('pinia')['setActivePinia'] const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix'] const shallowReactive: typeof import('vue')['shallowReactive'] const shallowReadonly: typeof import('vue')['shallowReadonly'] const shallowRef: typeof import('vue')['shallowRef'] const storeToRefs: typeof import('pinia')['storeToRefs'] const syncRef: typeof import('@vueuse/core')['syncRef'] const syncRefs: typeof import('@vueuse/core')['syncRefs'] const templateRef: typeof import('@vueuse/core')['templateRef'] const throttledRef: typeof import('@vueuse/core')['throttledRef'] const throttledWatch: typeof import('@vueuse/core')['throttledWatch'] const toRaw: typeof import('vue')['toRaw'] const toReactive: typeof import('@vueuse/core')['toReactive'] const toRef: typeof import('vue')['toRef'] const toRefs: typeof import('vue')['toRefs'] const toValue: typeof import('vue')['toValue'] const toggleDark: typeof import('../src/composables/theme')['toggleDark'] const triggerRef: typeof import('vue')['triggerRef'] const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount'] const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount'] const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted'] const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose'] const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted'] const unref: typeof import('vue')['unref'] const unrefElement: typeof import('@vueuse/core')['unrefElement'] const until: typeof import('@vueuse/core')['until'] const useAccess: typeof import('../src/composables/access')['useAccess'] const useActiveElement: typeof import('@vueuse/core')['useActiveElement'] const useAnimate: typeof import('@vueus const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue'] const useAsyncState: typeof import('@vueuse/core')['useAsyncState'] const useAttrs: typeof import('vue')['useAttrs'] const useAuthorization: typeof import('../src/composables/authorization')['useAuthorization'] const useBase64: typeof import('@vueuse/core')['useBase64'] const useBattery: typeof import('@vueuse/core')['useBattery'] const useBluetooth: typeof import('@vueuse/core')['useBluetooth'] const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints'] const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel'] const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation'] const useCached: typeof import('@vueuse/core')['useCached'] const useClipboard: typeof import('@vueuse/core')['useClipboard'] const useCloned: typeof import('@vueuse/core')['useCloned'] const useColorMode: typeof import('@vueuse/core')['useColorMode'] const useCompConsumer: typeof import('../src/composables/comp-consumer')['useCompConsumer'] const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog'] const useCounter: typeof import('@vueuse/core')['useCounter'] const useCssModule: typeof import('vue')['useCssModule'] const useCssVar: typeof import('@vueuse/core')['useCssVar'] const useCssVars: typeof import('vue')['useCssVars'] const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement'] const useCurrentRoute: typeof import('../src/composables/current-route')['useCurrentRoute'] const useCycleList: typeof import('@vueuse/core')['useCycleList'] const useDark: typeof import('@vueuse/core')['useDark'] const useDateFormat: typeof import('@vueuse/core')['useDateFormat'] const useDebounce: typeof import('@vueuse/core')['useDebounce'] const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn'] const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory'] const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility'] const useEmployeeSeletor: typeof import('../src/hooks/employee')['useEmployeeSeletor'] const useGlobalConfig: typeof import('../src/composables/global-config')['useGlobalConfig'] const useI18n: typeof import('vue-i18n')['useI18n'] const useI18nLocale: typeof import('../src/composables/i18n-locale')['useI18nLocale'] const useIdle: typeof import('@vueuse/core')['useIdle'] const useImage: typeof import('@vueuse/core')['useImage'] const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll'] const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver'] const useInterval: typeof import('@vueuse/core')['useInterval'] const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn'] const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier'] const useLastChanged: typeof import('@vueuse/core')['useLastChanged'] const useLayoutMenu: typeof import('../src/stores/layout-menu')['useLayoutMenu'] const useLink: typeof import('vue-router')['useLink'] const useLoading: typeof import('../src/composables/base-loading')['useLoading'] const useLoadingCheck: typeof import('../src/composables/loading')['useLoadingCheck'] const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage'] const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys'] const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory'] const useMediaControls: typeof import('@vueuse/core')['useMediaControls'] const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery'] const useMemoize: typeof import('@vueuse/core')['useMemoize'] const useMemory: typeof import('@vueuse/core')['useMemory'] const useMessage: typeof import('../src/composables/global-config')['useMessage'] const useMetaTitle: typeof import('../src/composables/meta-title')['useMetaTitle'] const useModal: typeof import('../src/composables/global-config')['useModal'] const useMounted: typeof import('@vueuse/core')['useMounted'] const useMouse: typeof import('@vueuse/core')['useMouse'] const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement'] const useMousePressed: typeof import('@vueuse/core')['useMousePressed'] const useMultiTab: typeof import('../src/stores/multi-tab')['useMultiTab'] const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver'] const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage'] const useNetwork: typeof import('@vueuse/core')['useNetwork'] const useNotification: typeof import('../src/composables/global-config')['useNotification'] const useNow: typeof import('@vueuse/core')['useNow'] const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl'] const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination'] const useOnline: typeof import('@vueuse/core')['useOnline'] const usePageLeave: typeof import('@vueuse/core')['usePageLeave'] const useParallax: typeof import('@vueuse/core')['useParallax'] const useParentElement: typeof import('@vueuse/core')['useParentElement'] const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver'] const usePermission: typeof import('@vueuse/core')['usePermission'] const usePointer: typeof import('@vueuse/core')['usePointer'] const usePointerLock: typeof import('@vueuse/core')['usePointerLock'] const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe'] const usePost: typeof import('../src/composables/api')['usePost'] const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation'] const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea'] const useScriptTag: typeof import('@vueuse/core')['useScriptTag'] const useScroll: typeof import('@vueuse/core')['useScroll'] const useScrollLock: typeof import('@vueuse/core')['useScrollLock'] const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage'] const useSetGlobalConfig: typeof import('../src/composables/global-config')['useSetGlobalConfig'] const useShare: typeof import('@vueuse/core')['useShare'] const useSlots: typeof import('vue')['useSlots'] const useSorted: typeof import('@vueuse/core')['useSorted'] const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition'] const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis'] const useStepper: typeof import('@vueuse/core')['useStepper'] const useStorage: typeof import('@vueuse/core')['useStorage'] const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync'] const useStyleTag: typeof import('@vueuse/core')['useStyleTag'] const useSupported: typeof import('@vueuse/core')['useSupported'] const useSwipe: typeof import('@vueuse/core')['useSwipe'] const useTable: typeof import('../src/hooks/pro-table')['useTable'] const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList'] const useTextDirection: typeof import('@vueuse/core')['useTextDirection'] const useTextSelection: typeof import('@vueuse/core')['useTextSelection'] const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize'] const useThrottle: typeof import('@vueuse/core')['useThrottle'] const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn'] const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory'] const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo'] const useTimeout: typeof import('@vueuse/core')['useTimeout'] const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn'] const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll'] const useTimestamp: typeof import('@vueuse/core')['useTimestamp'] const useTitle: typeof import('@vueuse/core')['useTitle'] const useToNumber: typeof import('@vueuse/core')['useToNumber'] const useToString: typeof import('@vueuse/core')['useToString'] const useToggle: typeof import('@vueuse/core')['useToggle'] const useTools: typeof import('../src/hooks/self-service')['useTools'] const useTransition: typeof import('@vueuse/core')['useTransition'] const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams'] const useUserManager: typeof import('../src/hooks/user')['useUserManager'] const useUserMedia: typeof import('@vueuse/core')['useUserMedia'] const useUserStore: typeof import('../src/stores/user')['useUserStore'] const useVModel: typeof import('@vueuse/core')['useVModel'] const useVModels: typeof import('@vueuse/core')['useVModels'] const useVibrate: typeof import('@vueuse/core')['useVibrate'] const useVirtualList: typeof import('@vueuse/core')['useVirtualList'] const useWakeLock: typeof import('@vueuse/core')['useWakeLock'] const useWebNotification: typeof import('@vueuse/core')['useWebNotification'] const useWebSocket: typeof import('@vueuse/core')['useWebSocket'] const useWebWorker: typeof import('@vueuse/core')['useWebWorker'] const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn'] const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus'] const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll'] const useWindowSize: typeof import('@vueuse/core')['useWindowSize'] const watch: typeof import('vue')['watch'] const watchArray: typeof import('@vueuse/core')['watchArray'] const watchAtMost: typeof import('@vueuse/core')['watchAtMost'] const watchDebounced: typeof import('@vueuse/core')['watchDebounced'] const watchDeep: typeof import('@vueuse/core')['watchDeep'] const watchEffect: typeof import('vue')['watchEffect'] const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable'] const watchImmediate: typeof import('@vueuse/core')['watchImmediate'] const watchOnce: typeof import('@vueuse/core')['watchOnce'] const watchPausable: typeof import('@vueuse/core')['watchPausable'] const watchPostEffect: typeof import('vue')['watchPostEffect'] const watchSyncEffect: typeof import('vue')['watchSyncEffect'] const watchThrottled: typeof import('@vueuse/core')['watchThrottled'] const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable'] const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter'] const whenever: typeof import('@vueuse/core')['whenever'] } // for type re-export declare global { // @ts-ignore export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue' }
使用
通过如上步骤配置好了之后,我们接下来就可以直接使用这些自动导入的依赖库了,代码如下:
// test.vue
const count = ref(0) const doubled = computed(() => count.value * 2)
如上,我们就不需要再重新导入ref
了。
到此这篇关于Vite使用unplugin-auto-import实现vue3中的自动导入的文章就介绍到这了,更多相关vue3中unplugin-auto-import内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- vue3项目如何配置按需自动导入API组件unplugin-auto-import
- vue中import导入三种方式详解
- vue异步组件与组件懒加载问题(import不能导入变量字符串路径)
- Vue export import 导入导出的多种方式与区别介绍
- 解决vue3 defineProps 引入定义的接口报错
- 一文详细聊聊vue3的defineProps、defineEmits和defineExpose
- Vue3中defineEmits、defineProps 不用引入便直接用
- vue3的defineExpose宏函数是如何暴露方法给父组件使用
- defineProps宏函数不需要从vue中import导入的原因解析