自动导入unplugin-auto-import+unplugin-vue-components
文章介绍
接下来将会以Vite + Vue3 + TS的项目来举例实现
在我们进行项目开发时,无论是声明响应式数据使用的ref、reactive,或是各种生命周期,又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能使用:
import { ref, reactive, onMounted, watch, provide} from 'vue'
除了以上这些功能相关的模块外,我们还会涉及到对组件的引用,比如熟知的新建一个项目都会有这两个文件:App.vue 和 HelloWorld.vue,也会在App.vue中看到以下代码:
import HelloWorld from './components/HelloWorld.vue'
这里只是导入了一个组件,如果一个页面由多个组件构成,那将会有很多个 import
现在有两个兄弟可以帮助我们完成自动化引入,无论是上述说的功能模块 or 组件
unplugin-auto-import:可按需自动导入模块,譬如上述的ref、watch等
unplugin-vue-components:自动导入vue的非插件组件,譬如上述的HelloWorld
不知道大家有没有使用过Element+,也就是ElementPlus,在它的按需导入中,有这样的说明

我们要用的也就是这兄弟俩
插件介绍
安装
可以从npm看到两个依赖的一些功能介绍:
npm依赖介绍:unplugin-auto-import - npm (npmjs.com)

npm依赖介绍:unplugin-vue-components - npm (npmjs.com)

在npm的介绍中还可以看到它对于UI组件库的支持范围还是很广泛的:

这里我采用pnpm作为包管理工具,大家可以根据自己的情况来调整安装方式
pnpm install -D unplugin-vue-components unplugin-auto-import
除了安装这两个插件之外,为了更好的演示组件的免导入,我这里安装Element+
pnpm install element-plus
配置
我的项目是vite构建,所以对应的项目构建配置文件是vite.config.ts
为方便管理插件配置,我通常会把插件配置写到一个单独的文件中,再到vite.config.ts中引入,大家可以直接写到配置文件中。
因为要用Element组件库做组件免导入的演示,所以下面配置了ElementPlusResolver相关代码,这块代码大家在Element+的按需导入说明中可以看到;其他配置可以从npm依赖介绍中查看。
// /config/plugin/index.ts
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';export function vitePluginsConfig(command = 'serve') {return [vue({ include: [/\.vue$/, /\.md$/] }),AutoImport({imports: ['vue'],resolvers: [ElementPlusResolver()],dts: 'types/auto-imports.d.ts' // 会在根目录下的types目录中生成该文件——记录自动导入了哪些模块}),Components({dirs: ['src'],dts: 'types/auto-components.d.ts', // 会在根目录下的types目录中生成该文件——记录自动导入了哪些组件resolvers: [ElementPlusResolver()] }),];
}
// vite.config.ts
import { vitePluginsConfig } from './config/plugin'
import { defineConfig } from 'vite'export default defineConfig({plugins: vitePluginsConfig()
})
演示
接下来启动项目,就可以免去 ref 的引用以及 HelloWord 的导入操作了


在没有做全局引入的情况下,HellowWorld 和 el-button 依旧可正常显示 。
打开自动生成的auto-components.d.ts后可以看到 HelloWorld 和 el-button 已经被自动导入:

问题
项目中使用到了Typescript 和 Eslint,以至于这里报错:找不到名称“ref”
这个错误可能会由 ts 提出,也可能由eslint 提出。
该问题会在下一篇文章来说明如何处理。
相关文章:
自动导入unplugin-auto-import+unplugin-vue-components
文章介绍 接下来将会以Vite Vue3 TS的项目来举例实现 在我们进行项目开发时,无论是声明响应式数据使用的ref、reactive,或是各种生命周期,又或是computed、watch、watchEffect、provide-inject。这些都需要前置引入才能使用: …...
Conda修改包/虚拟环境储存目录
Conda修改包/虚拟环境储存目录 关键字样例 关键字 通过conda config --show [key]可以查看某个配置的值,[key]留空可以查看所有配置 其中: envs-dirs 存放虚拟环境的储存目录pkgs_dirs 包的目录 通过conda config --add [key] [value]可以为配置添加值…...
Live555源码阅读笔记:哈希表的实现(C++)
😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 🤣本文内容🤣&a…...
警务平台app
智慧公安以大数据、云计算、人工智能、物联网和移动互联网技术为支撑,以“打、防、管、控”为目的,综合研判为核心,共享信息数据资源,融合业务功能,构建公安智慧大数据平台,实现公安信息数字化、网络化和智…...
Java代理模式详解
Java代理模式详解 概念 代理模式是一种设计模式,为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。在Java中,代理…...
docker centos镜像 npm安装包时报错“npm ERR! code ECONNRESET”
1.采用新的镜像地址 npm config set registry https://registry.npmmirror.com2.清理缓存 npm cache clean --force3.安装yarn npm install -g yarn4. 安装模块 在node_modules 同级目录执行下面命令: yarn add napi-build-utils env-paths express ejs cors …...
Angular中component和directive的区别?
在Angular中,Component和Directive都是重要的构建块,用于构建和组织应用程序的UI。然而,它们有不同的用途和特点。以下是Component和Directive的主要区别: Component(组件) 1、定义:Component…...
Unity 资源 之 Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享
精彩呈现:Pop It 3D 解压玩具与双人AI游戏 Unity 资源包分享 一、Pop It 3D 解压玩具的魅力二、双人游戏的互动乐趣三、Unity 游戏资源包的优势四、如何获取资源包 亲爱的游戏爱好者们,今天为大家带来一款令人兴奋的游戏资源——Pop It 3D 解压玩具双人带…...
linux离线安装mysql8(单机版)
文章目录 一、检查服务器是否有残留mysql资源,有的话就全删除1.1、查询mysql已安装的相关依赖:1.2、查找含有MySQL的目录 二、安装2.1、上传mysql安装包到文件夹下并解压2.2、移动及重命名2.3、mysql用户2.4、配置mysql所需的my.cnf文件2.5、给my.cnf配置…...
【Python】快速创建一个简易 HTTP 服务器(http.server)
目录 官方文档安装教程用命令行创建编写代码创建 实例 官方文档 http.server 警告: http.server 不推荐用于生产环境。它仅仅实现了 basic security checks 的要求。 安装 Python3 内置标准模块,无需安装。(在之前的 Python2 版本名称是 Si…...
随着软件开发方法的不断演进,Cobol 程序如何适应敏捷开发和持续集成/持续部署(CI/CD)的流程?
Cobol是一种古老的编程语言,最初设计用于商业数据处理。虽然它不是为敏捷开发和CI/CD流程而设计的,但仍然可以通过一些技术和方法来使其与这些现代开发流程兼容。 以下是一些方法可以帮助Cobol程序适应敏捷开发和CI/CD流程: 拆分和模块化&am…...
nodejs - MongoDB 学习笔记
一、简介 1、MongoDB 是什么 MongoDB 是一个基于分布式文件存储的数据库,官方地址 https://www.mongodb.com/ 2、数据看是什么 数据库(DataBase)是按照数据结构来组织、存储和管理数据的应用程序。 3、数据库的作用 主要作用是 管理数据…...
photoshop学习笔记——移动工具
移动工具,可以对图层进行移动,快捷键 V 使用的素材已经放上了,直接下载即可 按住ctrl 可以自动选取,鼠标点击哪个对象,自动选中哪个图层 按住 shift 校正角度(只能沿着直线移动) 按住 alt 拖…...
HarmonyOS 质量、测试、上架速浏
1.应用质量要求: 1. 应用体验质量建议: 功能数据完备 功能完备 数据完备 基础体验要求 基础约束 兼容性 稳定性 性能 功耗 安全…...
TS的访问修饰符有哪些
如果你和我一样是从强类型语言(如C、C#、Java)转过来的,相信你会一眼就知道是什么 public(默认) - 全部可访问 protected - 自己和派生类可访问 private - 只有自己可访问 废话不多说,上代码: class Person {publ…...
网络安全之扫描探测阶段攻防手段(二)
扫描探测 扫描探测阶段是攻击者对目标网络进行深入了解的关键步骤,同时也是防御者识别潜在威胁和加强安全防护的机会。 攻击端:技术原理和工具 端口扫描: 原理:攻击者使用端口扫描工具来识别目标网络中开放的端口,这…...
C++:泛型算法了解
什么是泛型算法 泛型算法是C标准模板库(STL)中的一部分,它们表示的是可以用于不同类型的元素和多种容器类型的一些经典算法的公共接口。这些算法之所以被称为“泛型”,是因为它们可以操作在多种容器类型上,包括但不限…...
基于bert的自动对对联系统
目录 概述 演示效果 核心逻辑 使用方式 1.裁剪数据集 根据自己的需要选择 2.用couplet数据集训练模型 模型存储在model文件夹中 3.将模型转换为ONNX格式 4.打开index.html就可以在前端使用此自动对对联系统了。 本文所涉及所有资源均在传知代码平台可获取。 概述 这个生成器利用…...
js-vue中多个按钮状态选中类似于复选框与单选框实现
1.vue中多个按钮状态选中类似于复选框 在Vue中处理多个按钮的选中状态切换,通常我们会利用Vue的响应式数据系统来追踪每个按钮的选中状态。 html <div id"app"> <button v-for"button in buttons" :key"button.id" :c…...
ObservableCollection新增数据前判断数据是否存在
public class MyDataModel {public int Id { get; set; }public string Name { get; set; }}public static void Main(){// 创建 ObservableCollectionObservableCollection<MyDataModel> myDataCollection new ObservableCollection<MyDataModel>{new MyDataMode…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
React Native 开发环境搭建(全平台详解)
React Native 开发环境搭建(全平台详解) 在开始使用 React Native 开发移动应用之前,正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南,涵盖 macOS 和 Windows 平台的配置步骤,如何在 Android 和 iOS…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件(System Property Definition File),用于声明和管理 Bluetooth 模块相…...
【单片机期末】单片机系统设计
主要内容:系统状态机,系统时基,系统需求分析,系统构建,系统状态流图 一、题目要求 二、绘制系统状态流图 题目:根据上述描述绘制系统状态流图,注明状态转移条件及方向。 三、利用定时器产生时…...
短视频矩阵系统文案创作功能开发实践,定制化开发
在短视频行业迅猛发展的当下,企业和个人创作者为了扩大影响力、提升传播效果,纷纷采用短视频矩阵运营策略,同时管理多个平台、多个账号的内容发布。然而,频繁的文案创作需求让运营者疲于应对,如何高效产出高质量文案成…...
HybridVLA——让单一LLM同时具备扩散和自回归动作预测能力:训练时既扩散也回归,但推理时则扩散
前言 如上一篇文章《dexcap升级版之DexWild》中的前言部分所说,在叠衣服的过程中,我会带着团队对比各种模型、方法、策略,毕竟针对各个场景始终寻找更优的解决方案,是我个人和我司「七月在线」的职责之一 且个人认为,…...
深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向
在人工智能技术呈指数级发展的当下,大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性,吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型,成为释放其巨大潜力的关键所在&…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
背包问题双雄:01 背包与完全背包详解(Java 实现)
一、背包问题概述 背包问题是动态规划领域的经典问题,其核心在于如何在有限容量的背包中选择物品,使得总价值最大化。根据物品选择规则的不同,主要分为两类: 01 背包:每件物品最多选 1 次(选或不选&#…...

