vue3插件（unplugin-auto-import自动引入的使用）

1. vite.config 文件里面

 1 import AutoImport from 'unplugin-auto-import/vite'
 2 
 3 plugins: [
 4   .......,
 5  AutoImport({
 6         include: [
 7           /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
 8           /\.vue$/,
 9           /\.vue\?vue/, // .vue
10           /\.md$/ // .md
11         ],
12         // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
13         imports: [
14           'vue',
15           'vue-router',
16           {
17             '@vueuse/core': [
18               // named imports
19               'useMouse', // import { useMouse } from '@vueuse/core',
20               // alias
21               ['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
22             ],
23 
24             axios: [['default', 'axios']],
25             'await-to-js': ['to']
26           }
27         ],
28         eslintrc: {
29           enabled: true, // 是否自动生成 eslint 规则，建议生成之后设置 false
30           filepath: './.eslintrc-auto-import.json' // 指定自动导入函数 eslint 规则的文件
31         },
32         resolvers: [ElementPlusResolver()],
33         dts: path.resolve('types', 'auto-imports.d.ts') // 指定自动导入函数TS类型声明文件路径
34       })   
35 ]

重新运行项目会生成一个auto-imports.d.ts的文件

文件内容如下:

 1 /* eslint-disable */
 2 /* prettier-ignore */
 3 // @ts-nocheck
 4 // noinspection JSUnusedGlobalSymbols
 5 // Generated by unplugin-auto-import
 6 export {}
 7 declare global {
 8   const EffectScope: typeof import('vue')['EffectScope']
 9   const ElMessage: typeof import('element-plus/es')['ElMessage']
10   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
11   const axios: typeof import('axios')['default']
12   const computed: typeof import('vue')['computed']
13   const createApp: typeof import('vue')['createApp']
14   const customRef: typeof import('vue')['customRef']
15   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
16   const defineComponent: typeof import('vue')['defineComponent']
17   const effectScope: typeof import('vue')['effectScope']
18   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
19   const getCurrentScope: typeof import('vue')['getCurrentScope']
20   const h: typeof import('vue')['h']
21   const inject: typeof import('vue')['inject']
22   const isProxy: typeof import('vue')['isProxy']
23   const isReactive: typeof import('vue')['isReactive']
24   const isReadonly: typeof import('vue')['isReadonly']
25   const isRef: typeof import('vue')['isRef']
26   const markRaw: typeof import('vue')['markRaw']
27   const nextTick: typeof import('vue')['nextTick']
28   const onActivated: typeof import('vue')['onActivated']
29   const onBeforeMount: typeof import('vue')['onBeforeMount']
30   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
31   const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
32   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
33   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
34   const onDeactivated: typeof import('vue')['onDeactivated']
35   const one rrorCaptured: typeof import('vue')['onErrorCaptured']
36   const onMounted: typeof import('vue')['onMounted']
37   const onRenderTracked: typeof import('vue')['onRenderTracked']
38   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
39   const onScopeDispose: typeof import('vue')['onScopeDispose']
40   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
41   const onUnmounted: typeof import('vue')['onUnmounted']
42   const onUpdated: typeof import('vue')['onUpdated']
43   const provide: typeof import('vue')['provide']
44   const reactive: typeof import('vue')['reactive']
45   const readonly: typeof import('vue')['readonly']
46   const ref: typeof import('vue')['ref']
47   const resolveComponent: typeof import('vue')['resolveComponent']
48   const shallowReactive: typeof import('vue')['shallowReactive']
49   const shallowReadonly: typeof import('vue')['shallowReadonly']
50   const shallowRef: typeof import('vue')['shallowRef']
51   const to: typeof import('await-to-js')['to']
52   const toRaw: typeof import('vue')['toRaw']
53   const toRef: typeof import('vue')['toRef']
54   const toRefs: typeof import('vue')['toRefs']
55   const toValue: typeof import('vue')['toValue']
56   const triggerRef: typeof import('vue')['triggerRef']
57   const unref: typeof import('vue')['unref']
58   const useAttrs: typeof import('vue')['useAttrs']
59   const useCssModule: typeof import('vue')['useCssModule']
60   const useCssVars: typeof import('vue')['useCssVars']
61   const useLink: typeof import('vue-router')['useLink']
62   const useMouse: typeof import('@vueuse/core')['useMouse']
63   const useMyFetch: typeof import('@vueuse/core')['useFetch']
64   const useRoute: typeof import('vue-router')['useRoute']
65   const useRouter: typeof import('vue-router')['useRouter']
66   const useSlots: typeof import('vue')['useSlots']
67   const watch: typeof import('vue')['watch']
68   const watchEffect: typeof import('vue')['watchEffect']
69   const watchPostEffect: typeof import('vue')['watchPostEffect']
70   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
71 }
72 // for type re-export
73 declare global {
74   // @ts-ignore
75   export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
76 }

页面如果还有警告出来的话，需要加下includes配置

 在tsconfig.json 文件中添加：

 1 { 2 ......., 3 "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "types/**/*.d.ts"] 4 } 

此时在页面中不用单独引入ref、watch 等其他  就可以直接在页面使用