自动导入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智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...

黑马Mybatis
Mybatis 表现层:页面展示 业务层:逻辑处理 持久层:持久数据化保存 在这里插入图片描述 Mybatis快速入门 
云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地
借阿里云中企出海大会的东风,以**「云启出海,智联未来|打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办,现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

MODBUS TCP转CANopen 技术赋能高效协同作业
在现代工业自动化领域,MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步,这两种通讯协议也正在被逐步融合,形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

MySQL:分区的基本使用
目录 一、什么是分区二、有什么作用三、分类四、创建分区五、删除分区 一、什么是分区 MySQL 分区(Partitioning)是一种将单张表的数据逻辑上拆分成多个物理部分的技术。这些物理部分(分区)可以独立存储、管理和优化,…...
Docker拉取MySQL后数据库连接失败的解决方案
在使用Docker部署MySQL时,拉取并启动容器后,有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致,包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因,并提供解决方案。 一、确认MySQL容器的运行状态 …...

阿里云Ubuntu 22.04 64位搭建Flask流程(亲测)
cd /home 进入home盘 安装虚拟环境: 1、安装virtualenv pip install virtualenv 2.创建新的虚拟环境: virtualenv myenv 3、激活虚拟环境(激活环境可以在当前环境下安装包) source myenv/bin/activate 此时,终端…...

ui框架-文件列表展示
ui框架-文件列表展示 介绍 UI框架的文件列表展示组件,可以展示文件夹,支持列表展示和图标展示模式。组件提供了丰富的功能和可配置选项,适用于文件管理、文件上传等场景。 功能特性 支持列表模式和网格模式的切换展示支持文件和文件夹的层…...

sshd代码修改banner
sshd服务连接之后会收到字符串: SSH-2.0-OpenSSH_9.5 容易被hacker识别此服务为sshd服务。 是否可以通过修改此banner达到让人无法识别此服务的目的呢? 不能。因为这是写的SSH的协议中的。 也就是协议规定了banner必须这么写。 SSH- 开头,…...

职坐标物联网全栈开发全流程解析
物联网全栈开发涵盖从物理设备到上层应用的完整技术链路,其核心流程可归纳为四大模块:感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性,例如传感器选型需平衡精度与…...