全局变量声明，自动引入依赖（unplugin-auto-import）（ declare global）

declare global

如果，要在全局作用域中声明一个新的变量或函数，供整个项目中的多个模块使用。可以使用 declare global 来实现。

`在一个全局声明文件中，如 globals.d.ts`
declare global {var globalVar: numberfunction globalFunction(): void
}`现在 globalVar 和 globalFunction 可以在任何地方使用`
globalVar = 42
globalFunction()

告别手动引入依赖

1、package.json

package.json


"devDependencies": {...其他依赖"unplugin-auto-import": "^0.5.11",...其他依赖
}

2、src/auto-imports.d.ts

项目的 src/auto-imports.d.ts 文件


// Generated by 'unplugin-auto-import'
// We suggest you to commit this file into source controldeclare global {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 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 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 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 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 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']
}

3、`vite.config.ts

vite.config.ts 文件

import AutoImport from 'unplugin-auto-import/vite'plugins: [vue(),vueJsx(),AutoImport({dts: 'src/auto-imports.d.ts',imports: ['vue', 'vue-router'],eslintrc: {enabled: true,filepath: './.eslintrc-auto-import.json',globalsPropValue: true,},}),
]，resolve: {alias: {'@': fileURLToPath(new URL('./src/', import.meta.url)),},
},server: {hmr: true,watch: {usePolling: true,   // 修复HMR热更新失效},//vue3 vite配置热更新不用手动刷新
},