Vue3 自动引入组件和 Vue 方法

用它的目的就是省的导入api和component了。可以直接使用

核心

• unplugin-auto-import

• unplugin-vue-components

安装

• 安装 unplugin-auto-import

npm i -D unplugin-auto-import

• 安装 unplugin-vue-components

npm i -D unplugin-vue-components

安装完以后他会在根目录生成一个 auto-import.d.ts 文件(这里必须引入自定义组件才会生成)

备注: 此时自动引入已经完成了.但是如果报错`Cannot find name ‘ref‘.`
解决方案: 找到tsconfig.json文件添加下面代码:

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts" // 此处引入该声明文件
  ]
}

修改根目录 vite.config.js

import { fileURLToPath, URL } from "node:url";

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite"; // 按需加载自定义组件
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue", "vue-router"],
      dts: "src/auto-import.d.ts",
    }),
    Components({
      // 解决命名冲突
      directoryAsNamespace: true,
      dts: true, //
      dirs: ["src/components"], // 按需加载的文件夹
      //     resolvers: [   // 设置UI框架自动加载
      //       ElementPlusResolver(),  // Antd   按需加载
      //       AntDesignVueResolver()  // ElementPlus按需加载
      //  ]
    }),
  ],
  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
});

• 使用

<template>
  <div>
    <el-button type="primary">{{ result1 }}</el-button>
    <el-button type="primary">{{ result2 }}</el-button>
    <MyTable></MyTable>
  </div>
</template>
<script setup>
  const result1 = ref("按钮1");
  const result2 = computed(() => result1.value + "计算属性");
  const Route = useRoute();
  console.log(Route);
  onMounted(() => {
    console.log("测试执行没有");
  });
</script>
<style lang="scss" scoped></style>

auto-imports.d.ts

/* 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";
  import("vue");
}