vue3 自动导入composition-apiI和组件

1.api的自动导入

常规写法：

<script setup>import { ref, reactive,  onMounted, computed ,watch } from 'vue';import { useRouter } from "vue-router";const router = useRouter();const person= reactive ({name：'张三'，age:20
);
</script>

使用插件后：

<script setup>const router = useRouter();const person= reactive ({name：'张三'，age:20
);
</script>

安装插件：

npm i -D unplugin-auto-import

vite.config 配置：

import { defineConfig } from "vite"; 
import AutoImport from 'unplugin-auto-import/vite' //引入api自动导入插件export default defineConfig({
//imports 数组中加入其它的三方件plugins: [AutoImport({ imports: ['vue', 'vue-router','xxx'] }),// 在src目录下生成一个指令文件存放各种全局指令dts: 'src/auto-import.js']
})

auto-import.js

/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {const EffectScope: typeof import('vue')['EffectScope']const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']const computed: typeof import('vue')['computed']const createApp: typeof import('vue')['createApp']const createPinia: typeof import('pinia')['createPinia']const customRef: typeof import('vue')['customRef']const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']const defineComponent: typeof import('vue')['defineComponent']const defineStore: typeof import('pinia')['defineStore']const effectScope: typeof import('vue')['effectScope']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 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 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 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 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 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 'vue'
}

2.组件的自动导入

使用前：

<template><HelloWorld />
</template>
<script setup>
import HelloWorld from "@/components/HelloWorld.vue";
</script>

使用插件后：

<template><HelloWorld />  //直接使用组件 不用import引入
</template>
<script setup>
</script>

此插件也可以直接使用其他组件，比如常用的UI框架，如elementPlus

可以支持这些插件：

安装插件：

npm i -D unplugin-vue-components

vite.config配置：

import { defineConfig } from "vite"; import Components from 'unplugin-vue-components/vite' // 按需加载自定义组件
import { ElementPlusResolver} from 'unplugin-vue-components/resolvers'
export default defineConfig {plugins: [vue(),Components({dts: true,//设置自动加载 组件的文件夹dirs: ['src/components'], // 按需加载的文件夹//设置UI框架自动加载 ,注意不要向main.js中导入UI框架了resolvers: [ElementPlusResolver()  // ElementPlus按需加载] })],
}