unplugin-auto-import使用步骤

我们在使用vue3时经常需要将第三方库api手动导入，相同的代码在每个组件中都要再写一遍，费时费力。此时我们可以使用unplugin-auto-import 将这些api自动导入。

1. 安装
   npm install -D unplugin-auto-import

2. 配置
   使用vite或者vue cli创建项目两者在导入方式上有一些区别
   使用vite：import AutoImport from 'unplugin-auto-import/vite'
   使用webpack：const AutoImport = require('unplugin-auto-import/webpack')

配置文件vue.config.js和vite.config.js的写法都是一样的

plugins: [ 
      ...
      AutoImport({
        imports: ['vue', 'vue-router', 'pinia'],
        include: [
          /\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
          /\.vue$/,
          /\.vue\?vue/, // .vue
          /\.md$/ // .md
        ],
        eslintrc: {
          enabled: false,
          filepath: './.eslintrc-auto-import.json', // 解决eslint报错问题
          globalsPropValue: true
        },
        dts: false // 
      })
      ...
    ],

.eslintrc-auto-import.json配置参考

{
  "globals": {
    "EffectScope": true,
    "acceptHMRUpdate": true,
    "computed": true,
    "createApp": true,
    "createPinia": true,
    "customRef": true,
    "defineEmits": true,
    "defineAsyncComponent": true,
    "defineComponent": true,
    "defineStore": true,
    "effectScope": true,
    "getActivePinia": true,
    "getCurrentInstance": true,
    "getCurrentScope": true,
    "h": true,
    "inject": true,
    "isProxy": true,
    "isReactive": true,
    "isReadonly": true,
    "isRef": true,
    "mapActions": true,
    "mapGetters": true,
    "mapState": true,
    "mapStores": true,
    "mapWritableState": true,
    "markRaw": true,
    "nextTick": true,
    "onActivated": true,
    "onBeforeMount": true,
    "onBeforeUnmount": true,
    "onBeforeUpdate": true,
    "onDeactivated": true,
    "onErrorCaptured": true,
    "onMounted": true,
    "onRenderTracked": true,
    "onRenderTriggered": true,
    "onScopeDispose": true,
    "onServerPrefetch": true,
    "onUnmounted": true,
    "onUpdated": true,
    "provide": true,
    "reactive": true,
    "readonly": true,
    "ref": true,
    "resolveComponent": true,
    "setActivePinia": true,
    "setMapStoreSuffix": true,
    "shallowReactive": true,
    "shallowReadonly": true,
    "shallowRef": true,
    "storeToRefs": true,
    "toRaw": true,
    "toRef": true,
    "toRefs": true,
    "triggerRef": true,
    "unref": true,
    "useAttrs": true,
    "useCssModule": true,
    "useCssVars": true,
    "useRoute": true,
    "useRouter": true,
    "useSlots": true,
    "watch": true,
    "watchEffect": true,
    "watchPostEffect": true,
    "watchSyncEffect": true
  }
}

参考:
https://juejin.cn/post/7208099384070815803
https://blog.youkuaiyun.com/sayUonly/article/details/123482912