vite自动引入api（按需import）

我们可以通过自动引入API省掉在页面中每次手动引入，例如：ref、reactive等等

unplugin-auto-import可以自动识别代码中库或者API的调用，自动导入相应的模块，从而减少了手动导入的工作量，避免反复写import，但这也是按需自动引入，可以减少产物大小，方便很多。

pnpm install -D unplugin-auto-import

在vite.config.ts中配置

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      vue(),
      AutoImport({
        // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
        imports: ["vue", "vue-router"],
        // 解决eslint报错问题
        eslintrc: {
          // 这里先设置成true然后npm run dev 运行之后会生成 .eslintrc-auto-import.json 文件之后，在改为false
          enabled: false,
          filepath: "./.eslintrc-auto-import.json", // 生成的文件路径
          globalsPropValue: true
        },
        // 配置文件生成位置
        dts: "src/auto-import.d.ts"
      })
    ]
  };
});

此时就可以直接使用vue相关函数了，但是有一个小问题就是eslint会提示报错

ESlint报错解决

// .eslintrc.cjs
module.exports = {
  // 省掉其它......
  
  extends: [
    "./.eslintrc-auto-import.json", // 与vite.config.ts中的filepath路径一致
  ]
};

// tsconfig.json
{
  // 省掉其它......
  "include": [
    "src/**/*.ts", 
    "src/**/*.tsx", 
    "src/**/*.vue",
    "src/auto-import.d.ts" // 与vite.config.ts中的dts路径一致
  ],
}

配置完成后，重启项目，eslint报错即可消除。
此时我们就可以直接使用vue内置API了，页面效果如下：

<template>
  <div></div>
</template>

<script setup lang="ts">
const val = ref(100);
const val2 = ref(200);
console.log("这是ref变量", val.value, val2.value);
</script>

<style lang="scss" scoped></style>

---

参考资料：
npm：unplugin-auto-import