使用auto-imgport插件实现vue3等API的自动引入

使用 auto-imgport 插件实现 vue3API 的自动引入

解决的问题

随着 vue3 越来越火，使用 vue3 的项目也越来越多，写过 vue3 的都知道，vue3 有一个 script setup 语法糖，在里面又很多工具函数需要引用，比如：

import { ref, reactive, computed, watch, onMounted } from "vue";
import useStore from "vuex"; //import useStore from 'pinia'
import { useRoute, useRouter } from "vue-router";
import axios from "axios";
import dayjs from "dayjs";
const route = useRoute();

const store = useStore();

const num = ref(100);

const pageInfo = computed(() => num.value + 100);

大多数页面都会有一堆 import 来引入一些函数，会非常麻烦，但如果我们使用了 unplugin-auto-import 这个插件之后，我们就可以省去这些常用的 import

const route = useRoute();

const store = useStore();

const num = ref(100);

const pageInfo = computed(() => num.value + 100);

这样项目代码写起来就简单多了！

如何使用

第一步：安装 unplugin-auto-import 依赖

npm i -D unplugin-auto-import

第二步：引入到项目的配置文件中，此处以 vite 为例（更多场景使用请自行查阅官网npm i -D unplugin-auto-import）

// vite.config.ts
import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({
  plugins: [
    AutoImport({
      /* options */
    }),
  ],
});

第三步：定义配置

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

export default defineConfig({
  plugins: [
    vue(),

    AutoImport({
      // 在哪些文件里可以直接引入
      include: [
        /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /\.vue$/,
        /\.vue\?vue/, // .vue
        /\.md$/, // .md
      ],
      // 自动引入哪些包
      imports: [
        // 自动引入整个模块
        "vue",
        "vue-router",
        //  自定义模块引入，比如只需要自动引入某个东西，给引入的模块起别名
        {
          "@vueuse/core": [
            // 按需导出的模块
            "useMouse", // import { useMouse } from '@vueuse/core',
            // 导出别名
            ["useFetch", "useMyFetch"], // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            //  默认导出
            ["default", "axios"], // import { default as axios } from 'axios',
          ],
        },
      ],
      // 声明文件
      dts: "./auto-imports.d.ts",
      resolvers: [
        /* ... */
      ],
    }),
  ],
});

声明文件 auto-imports.d.js 时自动生成的，可以去看看文件内容，里面会标明自动引入了哪些东西

// Generated by 'unplugin-auto-import'
export {}
declare global {
  const EffectScope: typeof import('vue')['EffectScope']
  const axios: typeof import('axios')['default']
  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 useMouse: typeof import('@vueuse/core')['useMouse']
  const useMyFetch: typeof import('@vueuse/core')['useFetch']
  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']
}