vue3 【提效】自动注册组件 unplugin-vue-components 实用教程

还在为每次都要导入组件而烦恼吗 ?

// 每次都需手动导入组件
import webName from '@/components/webName.vue'

用 unplugin-vue-components 来帮你吧,以后组件直接拿来用即可,无需再导入啦 !

<webName />

在这里插入图片描述

使用流程

1. 安装 unplugin-vue-components

npm i -D unplugin-vue-components

2. vite 配置中导入

vite.config.ts

import Components from 'unplugin-vue-components/vite'

plugins 中加入 Components

Components({}),

3. 新建组件

src/components 中的 vue 文件,会被自动注册!

新建 src/components/webName.vue

<template><div>网站的名称</div>
</template>

4. 使用组件

src/views/test.vue

<template><webName />
</template>

5. 重启项目

会重新生成 components.d.ts 文件(内部可见自动导入的组件)

WebName: typeof import('./src/components/webName.vue')['default']

访问页面正常渲染无报错,恭喜配置成功!

更多配置和用法见官网

https://www.npmjs.com/package/unplugin-vue-components

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/38591.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

audio ref获取后 pause失效

this.$refs[soundaudititem].pause()失效&#xff0c;通过ref获取后&#xff0c;调用pause不生效 后来使用id&#xff0c;生效 let audio document.getElementById(soundaudititem) audio.pause()

机器学习模型训练过程和预测过程 用孩子来生动的比喻 --九五小庞

训练过程&#xff1a;孩子在学习知识 想象一下&#xff0c;一个年幼的孩子刚开始学习新知识&#xff0c;这就像是机器学习的模型训练过程。 收集教材&#xff1a;孩子首先得到了一本教科书或一系列学习材料&#xff0c;这些材料就像机器学习中的数据集&#xff0c;包含了各种…

逻辑这回事(七)---- 器件基础

Xilinx FPGA创建了先进的硅模块(ASMBL)架构,以实现FPGA具有针对不同应用程序领域优化的各种功能组合的平台。通过这一创新,Xilinx提供了更多的设备选择,使客户能够为其特定设计选择具有正确的功能和功能组合的FPGA。ASMBL体系结构通过以下方式突破了传统的设计障碍:消除几…

LINUX系统编程:多线程互斥

目录 1.铺垫 2.线程锁接口的认识 静态锁分配 动态锁的分配 互斥量的销毁 互斥量加锁和解锁 3.加锁版抢票 4.互斥的底层实现 1.铺垫 先提一个小场景&#xff0c;有1000张票&#xff0c;现在有4个进程&#xff0c;这四个进程疯狂的去抢这1000张票&#xff0c;看看会发生什…

新书速览|Adobe Firefly:萤火虫:AI绘画快速创意设计

《Adobe Firefly&#xff1a;萤火虫&#xff1a;AI绘画快速创意设计》 本书内容 人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;浪潮的席卷已经变成不可阻挡的趋势&#xff0c;伴随着这种变化&#xff0c;在图形设计、图像制作、绘画领域也相应发生了…

什么是接口测试,我们如何实现接口测试?

1. 什么是接口测试 顾名思义&#xff0c;接口测试是对系统或组件之间的接口进行测试&#xff0c;主要是校验数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及相互逻辑依赖关系。其中接口协议分为HTTP,WebService,Dubbo,Thrift,Socket等类型&#xff0c;测试类型又主…

NewspaceGPT带你玩系列之SQL专家(强烈推荐)

目录 注册一个账号&#xff0c;用qq邮箱&#xff0c;然后登录选一个可用的Plus&#xff0c;不要选3.5探索GPT今天的主角是SQL Expert&#xff08;SQL 专家&#xff09;问题1&#xff1a;答1. 索引原因&#xff1a;优化措施&#xff1a;示例&#xff1a; 2. 查询设计原因&#x…

一个利用WebBrowser(古董)控件实现网页爬虫的代码片段

使用WebBrowser控件进行网页爬虫的一个基本方式并不是最常见的方法&#xff0c;因为WebBrowser控件主要是为了提供一个嵌入式的浏览器界面&#xff0c;而不是为了网页抓取。然而&#xff0c;你仍然可以通过监听WebBrowser控件的DocumentCompleted事件来获取网页的内容。 以下是…

ros中teleop_twist_keyboard安装使用

目录 1.安装 2.使用 3.说明 1.安装 sudo apt-get install ros-noetic-teleop-twist-keyboard 其中noetic替换成你自己的ros版本 2.使用 roscore #启动roscore rosrun teleop_twist_keyboard teleop_twist_keyboard.py …

零基础STM32单片机编程入门(五)FreeRTOS实时操作系统详解及实战含源码视频

文章目录 一.概要二.什么是实时操作系统三.FreeRTOS的特性四.FreeRTOS的任务详解1.任务函数定义2.任务的创建3.任务的调度原理 五.CubeMX配置一个FreeRTOS例程1.硬件准备2.创建工程3.调试FreeRTOS任务调度 六.CubeMX工程源代码下载七.讲解视频链接地址八.小结 一.概要 FreeRTO…

[SwiftUI 开发] 嵌套的ObservedObject中的更改不会更新UI

1. 发生问题的demo 业务逻辑代码 class Address: ObservableObject {Published var street "123 Apple Street"Published var city "Cupertino" }class User: ObservableObject {Published var name "Tim Cook"Published var address Addr…

解决 Win11 微软拼音输入法下 JetBrains IDE Shift+F6 失效的问题

一、使用旧版微软拼音输入法 1.在任务栏中输入法图标上右键&#xff0c;点击“设置”&#xff0c;或者在系统设置中进入“时间和语言 -> 语言和区域 -> 微软拼音输入法”设置项。 2.点击进入“常规”类别&#xff0c;滚动到页面底部&#xff0c;找到“兼容性 -> 使用…

nacos漏洞小结

Alibaba Nacos是阿里巴巴推出来的一个新开源项目&#xff0c;是一个更易于构建云原生应用的动态服务发现、配置管理和服务管理平台。致力于帮助发现、配置和管理微服务。Nacos提供了一组简单易用的特性集&#xff0c;可以快速实现动态服务发现、服务配置、服务元数据及流量管理…

我的创作纪念日 第四年 我在人间遭罪,也在人间享乐

回顾 一晃四年过去了&#xff0c;从毕业到现在依旧没有后悔自己当初的选择是工作而不是继续读研。 读研虽然可以给我更高的起点&#xff0c;但破碎的底层建筑和生活压力让我没的选择&#xff0c;毕竟只是一介凡人&#xff0c;而且还是底层出身&#xff0c;环境差&#xff0c;观…

64、哥伦比亚大学:CU-Net-目前脑肿瘤分割的最先进模型

本文已被接受发表在2024年IEEE MLISE会议上&#xff08;c&#xff09;2024 IEEE。准确地将脑肿瘤从MRI扫描中分割出来对于制定有效的治疗方案和改善患者预后至关重要。本研究引入了一种新的哥伦比亚大学网络&#xff08;CU-Net&#xff09;架构实现&#xff0c;用于使用BraTS 2…

收银系统源码-千呼新零售2.0【移动管理端】

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

如何循环遍历循环中的剩余元素

1、问题背景 给定一段文本&#xff0c;文本中包含多条错误信息&#xff0c;每条错误信息包含行号、错误路径和错误信息。需要从文本中提取出这些错误信息&#xff0c;并以特定的格式输出。 line, Error 12, This is the Error line, Error 34, Another Error line, Error …

【Linux】线程周边002之线程安全

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》《算法》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.Linux线程互斥 1…

每日一题——Python实现PAT乙级1050 螺旋矩阵(举一反三+思想解读+逐步优化)6千字好文

一个认为一切根源都是“自己不够强”的INTJ 个人主页&#xff1a;用哲学编程-CSDN博客专栏&#xff1a;每日一题——举一反三Python编程学习Python内置函数 Python-3.12.0文档解读 目录 我的写法 时间复杂度分析 空间复杂度分析 总结 我要更强 代码解释 时间复杂度 …

小区服务前台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;住户管理&#xff0c;管理员管理&#xff0c;员工管理&#xff0c;安保管理&#xff0c;安保分配管理&#xff0c;客服聊天管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;公告&#xff0c;…