【vue3】使用unplugin-auto-import自动导入模块

序言

模块化已经是现代 Web 开发必不可少的开发方式，频繁引入依赖包是一个常见的操作。但是，手动引入依赖包往往繁琐，尤其是当依赖包数量较多时，会显著降低开发效率。

unplugin-auto-import 插件，可以帮助我们在项目中，自动导入常用的使用的第三方库的 API，就可以方便我们开发，提升开发效率。

安装

npm i -D unplugin-auto-import

配置

在vite.config.ts中配置

  plugins: [
    vue(),
    AutoImport({
      // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
      dts: true,
      imports: ['vue', 'vue-router'],
    }),
  ],

配置完成，运行项目会在根目录生成auto-import.d.ts文件

使用示例

// import { ref, nextTick } from 'vue'
// import { useRouter, useRoute } from 'vue-router'

const route = useRoute()
const router = useRouter()
const menuKey = ref(1)

// 以上便可直接使用

优雅使用

如果项目中使用eslintrc校验则需在vite.config.ts中的AutoImport添加配置

      eslintrc: {
        enabled: true,
      },

完整代码

    AutoImport({
      // 可以自定义文件生成的位置，默认是根目录下，使用ts的建议放src目录下
      dts: true,
      imports: ['vue', 'vue-router'],
    }),

此外还需要eslintrc.js中添加如下配置（观察根目录中有无生成eslintrc-auto-import.json）：

  extends: [
    './.eslintrc-auto-import.json',
  ],

至此便可使用unplugin-auto-import来自动导入了。