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",
  ],
},
相关推荐
五点六六六5 分钟前
前端常见的性能指标采集
前端·性能优化·架构
吳所畏惧8 分钟前
NVM踩坑实录:配置了npm的阿里云cdn之后,下载nodejs老版本(如:12.18.4)时,报404异常,下载失败的问题解决
前端·windows·阿里云·npm·node.js·batch命令
陈随易23 分钟前
AI新技术VideoTutor,幼儿园操作难度,一句话生成讲解视频
前端·后端·程序员
Pedantic26 分钟前
SwiftUI 按钮Button:完整教程
前端
前端拿破轮28 分钟前
2025年了,你还不知道怎么在vscode中直接调试TypeScript文件?
前端·typescript·visual studio code
代码的余温30 分钟前
DOM元素添加技巧全解析
前端
JSON_L33 分钟前
Vue 电影导航组件
前端·javascript·vue.js
计算机编程果茶熊34 分钟前
毕设选题难、不会写代码、答辩紧张?校园失物招领系统从需求到实现全流程指南|计算机毕业设计
java·vue.js
用户214118326360241 分钟前
01-开源版COZE-字节 Coze Studio 重磅开源!保姆级本地安装教程,手把手带你体验
前端
奇舞精选1 小时前
从零开始实现Vue3+WebAssembly万级数据表格开发流程
vue.js·webassembly