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",
  ],
},
相关推荐
三月的一天24 分钟前
React单位转换系统:设计灵活的单位系统与单位系统转换方案
前端·javascript·react.js
我是日安31 分钟前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan201538 分钟前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立38 分钟前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js
小红41 分钟前
从乱码到清晰:深入理解字符编码的演进(ASCII到UTF-8)
前端
卓码软件测评1 小时前
K6的CI/CD集成在云原生应用的性能测试应用
前端·功能测试·测试工具·ci/cd·云原生
JordanHaidee1 小时前
【Rust GUI开发入门】编写一个本地音乐播放器(11. 支持动态明暗主题切换)
前端·ui kit
爱泡脚的鸡腿1 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
拜晨2 小时前
用 MCP 把自己的接口接入 AI
前端·node.js
小狮子安度因2 小时前
FFmpeg-vflip滤镜使用
vue.js·ffmpeg·myeclipse