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",
  ],
},
相关推荐
神秘代码行者9 分钟前
使用 contenteditable 属性实现网页内容可编辑化
前端·html5
小鱼人爱编程10 分钟前
Look My Eyes 最新IDEA快速搭建Java Web工程的两种方式
java·前端·后端
郝晨妤11 分钟前
【鸿蒙5.0】鸿蒙登录界面 web嵌入(隐私页面加载)
前端·华为·harmonyos
小鱼人爱编程16 分钟前
当上小组长的第3天,我裁掉了2年老员工
前端·后端·面试
晓得迷路了17 分钟前
栗子前端技术周刊第 74 期 - 2025 Vue.js 现状报告、Element Plus X、Material UI v7...
前端·javascript·vue.js
知识分享小能手21 分钟前
CSS3学习教程,从入门到精通, CSS3 变形效果(2D 和 3D)的详细语法知识点及案例代码(22)
前端·javascript·css·学习·3d·css3·html5
花之亡灵22 分钟前
.net 6 + vue3中使用SignaIR实现双向通信功能
前端·javascript·笔记·websocket·.net·信息与通信
小鱼人爱编程22 分钟前
Flutter 打包APK的几种方式
android·前端·后端
zy01010132 分钟前
React 直接操作 DOM
前端·javascript·react.js·dom·react操作dom
SuperherRo36 分钟前
Web开发-JS应用&VueJS框架&Vite构建&启动打包&渲染XSS&源码泄露&代码审计
前端·javascript·vue.js·xss·源码泄露·启动打包