unplugin-auto-import，Vue3自动引入api插件

       Vue3项目，定义数据、方法都要引入对应的api，比如ref、reactive、onMounted等等，很是麻烦，所以有了自动引入的插件，安装配置后都不用再引api，而可以直接使用了。

官方说明：

    Auto import APIs on-demand for Vite, Webpack, Rollup and esbuild. With TypeScript support. Powered by  unplugin.

使用方法：

一、下载插件

 npm i -D unplugin-auto-import

二、配置方法

在vite.config.ts中引入，plugins配置即可，不需要import，引入即可用。

 代码如下：

1.  
   import { fileURLToPath, URL } from 'node:url'
2.  
   import { defineConfig } from 'vite'
3.  
   import vue from '@vitejs/plugin-vue'
4.  
   import vueJsx from '@vitejs/plugin-vue-jsx'
5.  
   import AutoImport from 'unplugin-auto-import/vite'
6.  
   // https://vitejs.dev/config/
7.  
   export default defineConfig({
8.  
   plugins: [vue(), vueJsx(),AutoImport({
9.  
   imports:['vue'],
10.  
    dts:"src/auto-import.d.ts"
11.  
    })],
12.  
    resolve: {
13.  
    alias: {
14.  
    '@': fileURLToPath(new URL('./src', import.meta.url))
15.  
    }
16.  
    }
17.  
    })

三、自动引入文件

        在根目录下会生成一个auto-import.d.ts文件，和main.ts平级。这个文件就是替你去引入各种api的集成文件

 文件内容如下：

1.  
   // Generated by 'unplugin-auto-import'
2.  
   export {}
3.  
   declare global {
4.  
   const EffectScope: typeof import('vue')['EffectScope']
5.  
   const computed: typeof import('vue')['computed']
6.  
   const createApp: typeof import('vue')['createApp']
7.  
   const customRef: typeof import('vue')['customRef']
8.  
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
9.  
   const defineComponent: typeof import('vue')['defineComponent']
10.  
    const effectScope: typeof import('vue')['effectScope']
11.  
    const getCurrentInstance: typeof import('vue')['getCurrentInstance']
12.  
    const getCurrentScope: typeof import('vue')['getCurrentScope']
13.  
    const h: typeof import('vue')['h']
14.  
    const inject: typeof import('vue')['inject']
15.  
    const isProxy: typeof import('vue')['isProxy']
16.  
    const isReactive: typeof import('vue')['isReactive']
17.  
    const isReadonly: typeof import('vue')['isReadonly']
18.  
    const isRef: typeof import('vue')['isRef']
19.  
    const markRaw: typeof import('vue')['markRaw']
20.  
    const nextTick: typeof import('vue')['nextTick']
21.  
    const onActivated: typeof import('vue')['onActivated']
22.  
    const onBeforeMount: typeof import('vue')['onBeforeMount']
23.  
    const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
24.  
    const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
25.  
    const onDeactivated: typeof import('vue')['onDeactivated']
26.  
    const onErrorCaptured: typeof import('vue')['onErrorCaptured']
27.  
    const onMounted: typeof import('vue')['onMounted']
28.  
    const onRenderTracked: typeof import('vue')['onRenderTracked']
29.  
    const onRenderTriggered: typeof import('vue')['onRenderTriggered']
30.  
    const onScopeDispose: typeof import('vue')['onScopeDispose']
31.  
    const onServerPrefetch: typeof import('vue')['onServerPrefetch']
32.  
    const onUnmounted: typeof import('vue')['onUnmounted']
33.  
    const onUpdated: typeof import('vue')['onUpdated']
34.  
    const provide: typeof import('vue')['provide']
35.  
    const reactive: typeof import('vue')['reactive']
36.  
    const readonly: typeof import('vue')['readonly']
37.  
    const ref: typeof import('vue')['ref']
38.  
    const resolveComponent: typeof import('vue')['resolveComponent']
39.  
    const shallowReactive: typeof import('vue')['shallowReactive']
40.  
    const shallowReadonly: typeof import('vue')['shallowReadonly']
41.  
    const shallowRef: typeof import('vue')['shallowRef']
42.  
    const toRaw: typeof import('vue')['toRaw']
43.  
    const toRef: typeof import('vue')['toRef']
44.  
    const toRefs: typeof import('vue')['toRefs']
45.  
    const triggerRef: typeof import('vue')['triggerRef']
46.  
    const unref: typeof import('vue')['unref']
47.  
    const useAttrs: typeof import('vue')['useAttrs']
48.  
    const useCssModule: typeof import('vue')['useCssModule']
49.  
    const useCssVars: typeof import('vue')['useCssVars']
50.  
    const useSlots: typeof import('vue')['useSlots']
51.  
    const watch: typeof import('vue')['watch']
52.  
    const watchEffect: typeof import('vue')['watchEffect']
53.  
    const watchPostEffect: typeof import('vue')['watchPostEffect']
54.  
    const watchSyncEffect: typeof import('vue')['watchSyncEffect']
55.  
    }

配置后重启项目即可体验不引入api，随即开发啦~

这篇好文章是转载于：学新通技术网