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

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

使用该插件无需手动写 import 语句,直接使用refreactiveonMounted 等 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",
  ],
},
相关推荐
麦麦大数据13 分钟前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
Kevin Wang72739 分钟前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic43 分钟前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年1 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala1 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20081 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
文火冰糖的硅基工坊3 小时前
[嵌入式系统-146]:五次工业革命对应的机器人形态的演进、主要功能的演进以及操作系统的演进
前端·网络·人工智能·嵌入式硬件·机器人
2401_837088503 小时前
ResponseEntity - Spring框架的“标准回复模板“
java·前端·spring