unplugin-auto-import 插件可以自动导入API,它可以帮助开发者减少手动导入的重复代码,提高开发效率,并支持 Vue、Pinia、Vue Router 等常用库的自动导入。
使用该插件无需手动写 import 语句,直接使用ref 、reactive 、onMounted 等 Composition API,该插件还支持Pinia和 vue ruter 和axios等常用库,也支持自定义的函数
下载插件
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",
],
},