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-ignore export 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按需加载 ] }) ], }