vite插件 unplugin-auto-import 自动导入API

Chaoran2025-03-27 18:01

unplugin-auto-import 插件可以自动导入API，它可以帮助开发者减少手动导入的重复代码，提高开发效率，并支持 Vue、Pinia、Vue Router 等常用库的自动导入。

使用该插件无需手动写 import 语句，直接使用ref 、reactive 、onMounted 等 Composition API，该插件还支持Pinia和 vue ruter 和axios等常用库，也支持自定义的函数

下载插件

pnpm地址

ts 复制代码

pnpm i -D unplugin-auto-import

配置插件

vite.config.ts

ts 复制代码

import AutoImport from "unplugin-auto-import/vite";
 
export default defineConfig({
  plugins: [
    AutoImport({
      imports: ["vue", "vue-router", "pinia"], // 自动导入的库
      dts: "src/auto-imports.d.ts", // 生成类型声明文件，该文件自动生成
      dirs: ["src/utils/commonFn.ts"], // 自动导入该目录下的函数
      eslintrc: {
          enabled: true, // 生成 ESLint 配置
          filepath: './.eslintrc-auto-import.json', //该文件也是自动成功
        },
    }),
  ],
});

组件中使用

配置成功之后在组件中使用无需单独引入

isObject函数位于 src ->utils -> commonFn 下

ts 复制代码

export function isObject(val) {
  return typeof val === 'object' && val !== null
}

vue 复制代码

<template>
  <div class="v-model-container">
    <label>输入框:</label>
    <input v-model="inputValue" />
  </div>
</template>
<script setup lang="ts">
// import { ref } from 'vue'
// import {isObject} from "@/utils/commonFn";
 
const inputValue = ref('text text')
console.log(isObject(inputValue.value))
</script>

解决eslint检查报错

在.eslintrc.cjs 中配置

cjs 复制代码

module.exports = {
   ......
 
  /* 继承已有的规则 */
  extends: [
    "./.eslintrc-auto-import.json", // 必须放在最前面
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
  ],
},