前言

在写vue3项目的时候， 需要频繁在每个vue文件中导入ref,watch，常用的utils方法。 unplugin-auto-import可以实现依赖的自动导入，再也不用在每个页面都写一堆的import了！从而提高我们的开发效率。

安装

pnpm install unplugin-auto-import -D

配置

//vite.config.ts文件

import AutoImport from "unplugin-auto-import/vite";

export default defineConfig({ 
    plugins: [ 
        AutoImport({ 
            imports: ["vue", "vue-router"], // 预设库列表
            dirs: ["./src/utils"], // 添加自定义文件夹
            dts: "types/auto-imports.d.ts"
        }), 
    ], 

})

配置详解

1. dirs： 目录下模块导出的自动导入。默认情况下，它只扫描目录下的一级模块，我们可以添加一些通配符来做筛选,限定到指定目录。
2. dts： 生成相应.d.ts文件的文件路径 ，（可以在gitignore文件中忽略该文件的提交。）
3. imports: 需要全局引入的。