vite-plugin-vue-autoimportconfigextend

说明

unplugin-auto-import 提供的自动引入太爽了， 有时候我们想自动引入src下某个目录的模块， 但又没有比较方便的配置， 你可以安装此插件辅助配置

使用

1. 安装

npm i unplugin-auto-import vite-plugin-vue-autoimportconfigextend

2. 配置

// vite.config.ts
...
import AutoImport from 'unplugin-auto-import/vite';
import importsListen, { imports } from "vite-plugin-vue-autoimportconfigextend"
...
{
  ...
  plugins: [
    ...
    // api 自动引入
    AutoImport({
      dts: true,
      imports: imports(
        "vue", "vue-router", "pinia", "@vueuse/core", "vitest",
        // src 下 apis 文件夹中 index.ts 文件 所有export自动引入
        { target: "apis", include: ["index.ts"] },
        // src 下 utils 文件夹中 所有直接子ts文件内 所有export自动引入
        { target: "utils" },
      ),
      resolvers: [

      ]
    }),
    // 监听imports配置的路径文件变化，触发服务重启（重新生成声明文件）
    importsListen(),
    ...
  ]

  ...
}

// imports config
export interface dirImportOpts {
  alias?: string, // src的路径别名，默认@
  target: string; // 导入的路径 只能是src目录下的
  prefix?: string; // 导入文件名的前缀过滤
  suffix?: string; // 导入文件名的后缀过滤
  include?: string[]; // 导入的文件名（无视过滤）
  exclude?: string[]; // 不导入的文件名
}

3. 使用

// utils/xxx.ts
export const hello = () => console.log("Hello World");

<!-- xxx.vue -->
<script lang="ts" setup>

function handlerClick() {
  hello(); // 无需引入直接调用；并且有全局提示
}
</script>

<template>
  <button @click="handlerClick"></button>
</tempalte>

<style>
/* ... */
</style>

注意

1. 不支持文件内导出的其它文件的不具名导出；比如：

// 不支持
export * from "xxx"
// 支持
export const xxx = "xxx"/()=>{};
export let xxx = "xxx"/()=>{};
export function xxx() {};
export default "xxx"/()=>{}; // default的导出会分配该文件名为导出名
export { default as xxx, a, b, c as ccc } from "xxx";

2. ❗❗❗❗如果有重复的导出名会报错