vue3常用插件-unplugin-auto-import

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

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

1.安装

npm i -D unplugin-auto-import

2.vite.config.js配置

import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
  plugins: [
    ...
     AutoImport ({
      imports: ["vue", "vue-router","pinia"], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
      resolvers:[ElementPlusResolver()]
    })
  ]
})

使用效果

以 Vue 为例，在没有使用自动导入前，需要手写以下的 import 语句：

import { computed, ref } from 'vue'
const count = ref(0)
const doubled = computed(() => count.value * 2)

使用 unplugin-auto-import 插件后：

const count = ref(0)
const doubled = computed(() => count.value * 2)