配置vite自动按需引入 vant 组件

为什么学

        按需加载可以减少包体积,优化加载性能

学习内容

        全局注册组件

  • import 需要的组件
  • import 组件样式
  • 使用 app.use 注册组件

        Tree Shaking 介绍使用

        什么是 tree shaking?

Tree shaking是一种优化技术,用于减少JavaScript或其他编程语言中未被使用的代码的体积,从而提高应用程序的性能和加载速度。它的原理是通过静态分析代码,识别出未被引用的模块和代码块,并将其在编译过程中移除无用的资源,包括JS代码、CSS文件

实现方法:

        使用了es6语法

  • import
  • export

        插件按需自动引入组件

  • 安装插件
    • npm i unplugin-vue-components -D
  • 在vite.config.js中配置插件
  • 直接在模板中使用Vant组件(存在函数式组件)
  • 引入函数组件的样式-GG

重点&难点

        注册组件的方式,以及了解 Tree Shaking 的作用

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

fullcalendar案例

fullcalendar案例 <script srchttps://cdn.jsdelivr.net/npm/fullcalendar6.1.10/index.global.min.js></script><script srchttps://code.jquery.com/jquery-3.6.0.min.js></script> <!-- 引入 jQuery CDN --><script>document.addEventL…

虚拟机VMware vCneter告警:Log DIsk Exhaustion on frvc70,vCenter日志清理

其中frvc70是主机名称 1.告警原因 Troubleshooting vCenter Appliance /storage/log directory is 80% or more ful 当分区/storage/log使用率达到 80% 时&#xff0c;会触发此告警。 2.解决方法 1.通过 SSH 或通过 vCenter 虚拟机控制台连接到 vCenter Server Appliance …

Halcon 几何测量

文章目录 算子Halcon 计算两点之间的距离案例Halcon 计算点到直线的距离Halcon 计算点到区域的距离Halcon 线到区域的距离Halcon 线到线的距离 算子 distance_pp 两点之间的距离算子 distance_pp( : : Row1, Column1, Row2, Column2 : Distance) Row1 点1的行坐标 Column1 点1的…

[ESP32]在Thonny IDE中,如何將MicroPython firmware燒錄到ESP32開發板中?

[ESP32 I MicroPython] Flash Firmware by Thonny(4.1.4) IDE 正常安裝流程&#xff0c;可參考上述影片。然而&#xff0c;本篇文章主要是紀錄安裝過程遇到的bug, 供未來查詢用&#xff0c;也一併供有需要的同好參考。 問題:安裝後&#xff0c;Thonny互動介面顯示一堆亂碼和co…

网安人必看!CISP家族顶流证书攻略

网络安全已成为当今的热门领域&#xff0c;证书在职业发展中的重要性不言而喻。但是&#xff0c;证书市场五花八门&#xff0c;选择适合自己的证书可是个大问题。别担心&#xff0c;今天我们就来聊聊CISP家族的几个热门认证&#xff0c;让你在网络安全领域的发展更加顺利&#…

ADI 配合 USRP 使用的相控阵天线 cn0566

相控阵天线 在这里插入图片描述

IDEA快捷键大全

提示&#xff1a; ① 主要记录我在使用 IDEA 开发的过程中用到的快捷键&#xff0c;可以提高开发速度。 ② 不一定要全部记住&#xff0c;主要是当一个参考文档&#xff0c;大家有一点印象&#xff0c;随时可以查看。 参考博客 > IntelliJ IDEA 快捷键说明大全&#xff08;官…

Springboot+vue的健身房管理系统(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的健身房管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的健身房管理系统&#xff0c;采用M&#xff08;model&#xf…

WPF图表库LiveChart异常问题处理-System.ArgumentOutOfRangeException:指定的参数超出了有效值的范围

问题&#xff1a; 在使用liveChart处理一个以时间为X轴的曲线时&#xff0c;遇到一个报错&#xff1a;指定的参数超出了有效值的范围System.ArgumentOutOfRangeException:“Specified argument was out of the range of valid values. Arg_ParamName_Name” 指定的参数超出了有…

YOLOv5源码逐行超详细注释与解读(1)——项目目录结构解析

前言 前面简单介绍了YOLOv5的网络结构和创新点&#xff08;直通车&#xff1a;【YOLO系列】YOLOv5超详细解读&#xff08;网络详解&#xff09;&#xff09; 在接下来我们会进入到YOLOv5更深一步的学习&#xff0c;首先从源码解读开始。 因为我是纯小白&#xff0c;刚开始下…

EXCHANGE PARTITION 方法处理(挽救)大型分区表中的块损坏的步骤

当在巨大的表分区块&#xff08;例如 ORA-01578&#xff09;中发现损坏时&#xff0c;并且我们没有备份&#xff08;例如 RMAN、操作系统级别、导出或任何外部资源&#xff09;来恢复损坏&#xff0c;我们仍然可以尝试挽救使用 10231 事件处理表中的剩余数据&#xff08;由于跳…

扩展学习|商业智能和大数据分析的研究前景(比对分析)

文献来源&#xff1a; Liang T P , Liu Y H .Research Landscape of Business Intelligence and Big Data analytics: A bibliometrics study[J].Expert Systems with Applications, 2018, 111(NOV.):2-10.DOI:10.1016/j.eswa.2018.05.018. 信息和通信技术的快速发展导致了数字…

养老院|基于Springboot的养老院管理系统设计与实现(源码+数据库+文档)

养老院管理系统目录 目录 基于Springboot的养老院管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、老人信息管理 2、家属信息管理 3、公告类型管理 4、公告信息管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕设选…

西瓜书读书笔记整理(十二) —— 第十二章 计算学习理论(下)

第十二章 计算学习理论&#xff08;下&#xff09; 12.4 VC 维&#xff08;Vapnik-Chervonenkis dimension&#xff09;12.4.1 什么是 VC 维12.4.2 增长函数&#xff08;growth function&#xff09;、对分&#xff08;dichotomy&#xff09;和打散&#xff08;shattering&…

【Linux系统】文件系统和软硬链接

前言 之前的博客介绍过了打开的文件是如何被操作系统管理起来的&#xff0c;但是绝大多数文件是没有被打开的&#xff0c;静静地躺在磁盘上。 这些文件也应该要被操作系统管理起来&#xff0c;以方便系统快速地在磁盘上查找它们&#xff0c;进而加载到内存。 这套管理方式就…

vue使用json格式化

安装 npm i bin-code-editor -S // Vue2 npm install vue-json-viewer --save 在main.js引用 //引入bin-code-editor相关插件和样式 import CodeEditor from bin-code-editor; import bin-code-editor/lib/styles/index.css; import JsonViewer from vue-json-viewer //vue使用…

golang开源的可嵌入应用程序高性能的MQTT服务

golang开源的可嵌入应用程序高性能的MQTT服务 什么是MQTT&#xff1f; MQTT&#xff08;Message Queuing Telemetry Transport&#xff09;是一种轻量级的、开放的消息传输协议&#xff0c;设计用于在低带宽、高延迟或不可靠的网络环境中进行通信。MQTT最初由IBM开发&#xf…

python webdriver 测试框架数据驱动json文件驱动的方式

简介&#xff1a; 数据驱动excel驱动方式,就是数据配置在excel里面&#xff0c;主程序调用的时候每次用从excel里取出的数据作为参数&#xff0c;进行操作&#xff0c; 需要掌握的地方是对excel的操作&#xff0c;要灵活的找到目标数据 测试数据.xlsx: 路径-D:\test\0627 E…

产品原型图设计规范大全

目前&#xff0c;市场上许多产品经理或设计师都在使用一些优秀的原型设计规范&#xff0c;这些规范几乎涵盖了原型设计的许多方面。一套好的、完整的原型设计规范可以统一产品设计风格&#xff0c;检验产品的可用性&#xff0c;有效提高产品经理绘制原型图的效率&#xff0c;更…

力扣238. 除自身以外数组的乘积(前后缀和)

Problem: 238. 除自身以外数组的乘积 文章目录 题目描述思路复杂度Code 题目描述 思路 思路1&#xff1a; 1.先求取数组的包括当前下标值得前后缀乘积&#xff08;利用两个数组记录下来分别为leftProduct和rightProduct&#xff09; 2.当求取一个下标为i的数组中的元素&#x…