实现vue3中的自动导入工具

unplugin-auto-import  插件可以自动导入API，它可以帮助开发者减少手动导入的重复代码，提高开发效率，并支持 Vue、Pinia、Vue Router 等常用库的自动导入。

使用该插件无需手动写 import 语句，直接使用 ref、reactive、onMounted 等 Composition API，该插件还支持Pinia和 vue ruter 和axios等常用库，也支持自定义的函数

下载插件

npm  install  unplugin-auto-import  -D

2. config.js 配置文件内追加配置

2.1 Vite

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
  plugins: [
    AutoImport({ 
      imports: ["vue", "vue-router", "pinia"],
      dts: false,
      eslintrc: {
      enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
          filepath: "./.eslintrc-auto-import.json", // 生成json文件
          globalsPropValue: true,
      },
    }),
  ],
})

 2.2 Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('unplugin-auto-import/webpack').default({ 
        AutoImport({ 
          imports: ["vue", "vue-router", "pinia"],
          dts: false,
          eslintrc: {
          enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
              filepath: "./.eslintrc-auto-import.json", // 生成json文件
              globalsPropValue: true,
          },
        }),
     }),
  ],
}

解决eslint检查报错

在.eslintrc.cjs 中配置

module.exports = {
   ......
 
  /* 继承已有的规则 */
  extends: [
    "./.eslintrc-auto-import.json", // 必须放在最前面
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
},