vue相关api自动引入

配置自动引入

开发过程中经常会使用到vue相关api，例如：ref、reactive、toRef等。

若每个文件都引入一次非常浪费时间，且会增加代码量。

这里通过unplugin-auto-import来实现vue相关api的自动引入，页面无需再手动引入

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>