前言

由于vue3新增了composition api，将很多方法都抽离出去了，在使用vue3时，就不得不写很多import来引入各种方法。当某个组件用到了很多方法和组件时，就会导致script中有很多条import语句。

import {
  reactive,
  ref,
  computed,
  watch,
  onMounted,
  onUnmounted,
  getCurrentInstance,
  provide,
  inject,
} from "vue";
import type { PropType, ComputedRef, Ref } from "vue";
import Form from "/@/components/Form.vue"
import Table from "/@/components/Table.vue"
import SvgIcon from "/@/components/SvgIcon.vue"
import Drawer from "/@/components/Drawer.vue"

而unplugin-auto-import和unplugin-vue-components这两个库就可以帮我们自动引入api和组件。

配置

在vite.config.ts中配置plugins，AutoImport和Components可以做一些自定义的配置，包括在vite、webpack、rollup等等中的配置，详细配置查看unplugin-auto-import、unplugin-vue-components文档

plugins: {
  AutoImport({
    imports: ["vue", "vue-router", "vue-i18n", "vue/macros"],
  }),
  Components(),
}

插件会自动生成auto-imports.d.ts和components.d.ts两个文件

auto-imports.d.ts

// Generated by 'unplugin-auto-import'
export {}
declare global {
  const $$: typeof import('vue/macros')['$$']
  const $: typeof import('vue/macros')['$']
  const $computed: typeof import('vue/macros')['$computed']
  const $customRef: typeof import('vue/macros')['$customRef']
  const $ref: typeof import('vue/macros')['$ref']
  const $shallowRef: typeof import('vue/macros')['$shallowRef']
  const $toRef: typeof import('vue/macros')['$toRef']
  const EffectScope: typeof import('vue')['EffectScope']
  const computed: typeof import('vue')['computed']
  const createApp: typeof import('vue')['createApp']
  const customRef: typeof import('vue')['customRef']
  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
  const defineComponent: typeof import('vue')['defineComponent']
  const effectScope: typeof import('vue')['effectScope']
  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 markRaw: typeof import('vue')['markRaw']
  const nextTick: typeof import('vue')['nextTick']
  const onActivated: typeof import('vue')['onActivated']
  const onBeforeMount: typeof import('vue')['onBeforeMount']
  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 shallowReactive: typeof import('vue')['shallowReactive']
  const shallowReadonly: typeof import('vue')['shallowReadonly']
  const shallowRef: typeof import('vue')['shallowRef']
  const toRaw: typeof import('vue')['toRaw']
  const toRef: typeof import('vue')['toRef']
  const toRefs: typeof import('vue')['toRefs']
  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 useI18n: typeof import('vue-i18n')['useI18n']
  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']
}

components.d.ts

// generated by unplugin-vue-components
// We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/vue-next/pull/3399
import '@vue/runtime-core'

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
    SvgIcon: typeof import('./src/components/VeIcon/SvgIcon.vue')['default']
    VeCheckboxGroup: typeof import('./src/components/VeCheckbox/VeCheckboxGroup.vue')['default']
    VeDialog: typeof import('./src/components/VeDialog/VeDialog.vue')['default']
    VeDrawer: typeof import('./src/components/VeDrawer/VeDrawer.vue')['default']
    VeForm: typeof import('./src/components/VeForm/VeForm.vue')['default']
    VeFormItem: typeof import('./src/components/VeForm/components/VeFormItem.vue')['default']
    VeIcon: typeof import('./src/components/VeIcon/VeIcon.vue')['default']
    VeRadioGroup: typeof import('./src/components/VeRadio/VeRadioGroup.vue')['default']
    VeSelect: typeof import('./src/components/VeSelect/index.vue')['default']
    VeTable: typeof import('./src/components/VeTable/VeTable.vue')['default']
  }
}

export {}

这两个插件会自动帮我们引入这些方法和组件，减少了页面内大量的import语句。在组件中直接去使用reactive、ref等等api即可，十分的方便，也让页面干净了不少。

vue3项目配置自动引入composition api和自定义组件

前言

配置