vue使用自动化导入api插件unplugin-auto-import,避免频繁手动导入

server/2025/1/14 20:52:28/

‌unplugin-auto-import‌是一个现代的自动导入插件,旨在简化前端开发中的导入过程,减少手动导入的繁琐工作,提升开发效率。它支持多种构建工具,包括Vite、Webpack、Rollup和esbuild,并且可以与TypeScript配合使用,提供强大的类型系统支持‌。支持自动导入基础库vue、react、pinia、vue router、lodash、axios等等几乎任何JavaScript库或框架中的API,只要符合JavaScript的模块规范。

功能特点
1‌.自动导入常用库的API‌:如Vue、vue-router、@vueuse/core等,减少手动导入的重复工作‌
‌2.支持自定义目录中的函数自动导入‌:可以在配置中指定需要自动导入的目录和文件‌
‌3.生成类型声明文件‌:对于使用TypeScript的项目,可以生成相应的类型声明文件,确保代码的健壮性‌
‌4.生成ESLint配置文件‌:避免未定义变量错误,优化代码质量‌

使用方法
1.‌安装插件‌:使用npm或yarn将unplugin-auto-import安装为开发依赖。

npm install unplugin-auto-import --save-dev
# 或者使用 yarn
yarn add unplugin-auto-import --dev

2.‌在vite.config.js或vite.config.ts配置插件‌:在构建工具的配置文件中添加unplugin-auto-import插件的配置。以下是一个在Vite中使用的例子:

import { defineConfig } from 'vite';
import autoImport from 'unplugin-auto-import/vite';
export default defineConfig({plugins: [autoImport({imports: ['vue'], // 自动导入vue的所有api}),],
});

如图(这里我只配置了vue,大家根据需要可添加其他库):
在这里插入图片描述

3.到此完成啦,这样我们开发时就不用在每个文件去引入vue的api,即可进行调用。
在这里插入图片描述


http://www.ppmy.cn/server/158377.html

相关文章

贪心算法笔记

贪心算法笔记 大概内容 贪心就是对于一个问题有很多个步骤,我们在每一个步骤中都选取最优的那一个,最后得出答案。就是在一些函数中可行,但是有些比如二次函数,因为它的转折点不一定最优,就是不可行的。那么如何判断贪心呢?有这么几种 看时间复杂度,一般的就是 O ( n…

【经验】MCU在keil和IAR中开启FPU 硬件浮点运算单元

本文是总结归纳了两篇笔记: 关于华大/小华 HC32F460 在IAR环境中,无法启用FPU 硬件浮点运算单元的解决方案 【经验】雅特力MCU在Keil和IAR中开启和关闭浮点运算单元(FPU)的配置方法及注意事项 第一步 先查看所使用的MCU的手册,是否内置了FPU…

Oracle 学习指南与资料分享

Oracle 学习资料 Oracle 学习资料 Oracle 学习资料 在当今数字化飞速发展的浪潮中,Oracle 数据库凭借其卓越的性能、强大的功能以及高度的可靠性,稳坐数据库领域的前沿宝座,广泛应用于金融、电信、航空航天等诸多关键行业。如果你有志于深入…

Word 转成pdf及打印的开源方案支持xp

Word转成pdf、打印的方案几乎没有免费开源的方案,现在提供一个通过LibreOffice实现的方案 操作依赖LibreOffice需要安装,点此下载老版本 5.4.7.2是最后一个支持xp的 版本如需xp要请安装此版本 LibreOffice官方介绍 LibreOffice 是一款开放源代码的自…

C#中的常用集合

目录 一、动态数组ArrayList 二、List 三、栈(Stack) 四、队列(Queue) 五、字典(Dictionary),int> 一、动态数组ArrayList ArrayList 是 C# 中提供的一种动态数组类,位于命名空间 Syste…

基于python Numpy的24位音频数据读取实例解析

一 概念 24位PCM编码是一种比较少见的音频编码格式,它采用了更高的分辨率来表达音频信号。每个采样点用3个字节(24位)的无符号整数表示,取值范围在0到2^24-1之间。这意味着它可以表达更大的动态范围和更细微的音频细节。但是&…

ubuntu 下生成 core dump

在Ubuntu下,发现程序崩溃后不生成core dump文件, 即使设置了ulimit -c unlimited后仍然无效。 1.ulimit -c unlimited 输出的的含义是核心转储文件的大小限制,单位是blocks,默认是0,表示不生成core dump文件。 2. 重设core_pattern ulimit -c unlimited后,核心转储文件…

SpringBoot项目实战(39)--Beetl网页HTML文件中静态图片及CSS、JS文件的引用和展示

使用Beetl开发网页时,在网页中使用的CSS、JS、图片等静态资源需要进行适当的配置才可以展示。大致的过程如下: (1)首先Spring Security框架需要允许js、css、图片资源免授权访问。 (2)网站开发时&#xff0…