vue，使用unplugin-auto-import避免反复import，按需自动引入

项目库：https://github.com/unplugin/unplugin-auto-import
参考：
https://juejin.cn/post/7012446423367024676
https://cloud.tencent.com/developer/article/2236166


背景：
vue3项目中，基本所有页面都会引入vue3框架的api，elementPlus手动引入组件也很麻烦
每个页面都import太繁琐了，有办法可以简化它吗

用到以下两个插件unplugin-auto-import和unplugin-vue-components


我的项目是vue3+vue-cli+webpack+js（如果是ts，自动导入组件还需要其他配置文件）

• unplugin-auto-import
  自动识别代码中库或者API的调用，自动导入相应的模块，从而减少了手动导入的工作量，避免反复写import，但这也是按需自动引入，可以减少产物大小，方便很多

  unplugin-auto-import配置项
  imports: 自动导入的库列表，如 vue、vue-router
  dirs: 自动导入的目录
  dts: 生成的类型声明文件路径
  eslintrc: 生成的 ESLint 配置文件选项

  我的配置

  const AutoImport = require('unplugin-auto-import/webpack')
  const Components = require('unplugin-vue-components/webpack')
  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  const path = require('path')
  module.exports = defineConfig({
    configureWebpack: {
      plugins: [
        AutoImport({
          imports: ["vue", "vue-router","pinia"],//自动引入vue的ref、onmounted等，无需在页面中重复import
          dirs:['./src/api/modules/**','./src/store/**'],
  

  使用unplugin-auto-import前：

  <script setup>
  import { onMounted, nextTick, reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { mainStore } from '@/store/pinia.js'
  import login from '@/api/modules/login'	 // 接口请求
  const store = mainStore()
  const router = useRouter()
  const data = reactive({
    isLoading: false,
    type: [
      { name: '1111', value: 0 },
      { name: '2222', value: 1 }
    ]
  })
  
  

  使用unplugin-auto-import后：

  <script setup>
  const store = mainStore()
  const router = useRouter()
  const data = reactive({
    isLoading: false,
    type: [
      { name: '1111', value: 0 },
      { name: '2222', value: 1 }
    ]
  })
  

  注意版本！！直接npm i安装的如下版本，按照官网配置会报错

  	//先前安装的版本
      "unplugin-auto-import": "^0.19.0",
      "unplugin-vue-components": "^0.28.0",
  

  Module build failed: Error [ERR_REQUIRE_ESM]: require() of ES Module
  

  TypeError: AutoImport is not a function
  
  网上查的解决办法都是说得降低版本，需要回退版本
  回退之后的确可以正常跑了，但我不懂为什么版本高就得降，难道没有高版本的写法吗

  npm install unplugin-vue-components@0.25.2 --save-dev
  
  npm install unplugin-auto-import@0.16.1 --save-dev
  

  重新安装后可正常使用

• unplugin-vue-components：自动导入组件

  const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
  Components({
          resolvers: [
             ElementPlusResolver()
          ]
        })