vue3.x学习笔记之项目实战 -- 自动导入composition-apiI和组件

• vue3 自动导入composition-api和组件

• api的自动导入

• 插件 unplugin-auto-import

• 组件的自动导入

• 插件 unplugin-vue-components

‍vue3 自动导入composition-api和组件

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>

插件 unplugin-auto-import

官网地址：https://www.npmjs.com/package/unplugin-auto-import

安装插件：

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

// 'src/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'
}

组件的自动导入

使用前：

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

使用插件后：

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

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

可以支持这些插件：

vue3.x学习笔记之项目实战 -- 自动导入composition-apiI和组件

插件unplugin-vue-components

npm地址：https://www.npmjs.com/package/unplugin-auto-import

安装插件：

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