配置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 的作用

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

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

相关文章

【2024程序员必看】鸿蒙应用开发行业分析

鸿蒙操作系统沉浸四年,这次终于迎来了破局的机会,自从2023年华为秋季发布会上宣布鸿蒙 Next操作系统不在兼容Android后,就有不少大厂开始陆续与华为达成了鸿蒙原生应用的开发合作,据1月18日华为官方宣布110多天的产业合力“突进”…

python+selenium自动化测试项目实战

说明:本项目采用流程控制思想,未引用unittest&pytest等单元测试框架 一.项目介绍 目的 测试某官方网站登录功能模块可以正常使用 用例 1.输入格式正确的用户名和正确的密码,验证是否登录成功; 2.输入格式正确的用户名和不…

单例模式有几种写法?请谈谈你的理解?

为什么有单例模式? 单例模式(Singleton),也叫单子模式,是一种常用的软件设计模式。在应用这个模式时,单例对象的类必须保证只有一个实例存在。许多时候整个系统只需要拥有一个全局对象,这样有利…

测试用例的书写方式以及测试模板大全

一个优秀的测试用例,应该包含以下信息: 1 ) 软件或项目的名称 2 ) 软件或项目的版本(内部版本号) 3 ) 功能模块名 4 ) 测试用例的简单描述,即该用例执行的目的或方法…

SpringMVC实现对网页的访问,在请求控制器中创建处理请求的方法

目录 测试HelloWorld RequestMapping注解 RequestMapping注解的位置 RequestMapping注解的value属性 RequestMapping注解的method属性 SpringMVC支持路径中的占位符(重点) SpringMVC获取请求参数 1、通过ServletAPI获取 2、通过控制器方法的形参…

Spring-boot项目+Rancher6.3部署+Nacos配置中心+Rureka注册中心+Harbor镜像仓库+NFS存储

目录 一、项目概述二、环境三、部署流程3.1 Harbor部署3.1.1 docker安装3.1.2 docker-compose安装3.1.3 安装证书3.1.4 Harbor下载配置安装 3.2 NFS存储搭建3.3 Rancher平台配置3.3.1 NFS存储相关配置3.3.2 Harbor相关配置3.3.3 Nacos部署及相关配置3.3.4 工作负载deployment配…

Vue3+vite引入Tailwind CSS

Tailwind CSS 是一个为快速创建定制化 UI 组件而设计的实用型框架。与其他 CSS 框架或库不同,Tailwind CSS 组件没有预先设置好样式。可以使用 Tailwind 的低级实用类来为 CSS 元素设置样式,如 margin、flex、color 等。 自从 2017 年发布以来&#xff…

嵌入式学习第十五天

内存管理: 1.malloc void *malloc(size_t size); 功能: 申请堆区空间 参数: size:申请堆区空间的大小 返回值: 返回获得的空间的首地址 失败返回NULL 2.free void free(void *ptr); 功能: 释放堆区空间 注…

五大架构风格之一:数据流风格

数据流风格详细介绍 系统架构数据流风格是一种软件体系结构风格,它强调了系统内部不同部分之间的数据流动。这种风格侧重于描述系统中的数据处理过程,以及数据是如何从一个组件传递到另一个组件的。以下是系统架构数据流风格的详细介绍: 1 基…

vue3项目下载@element-plus/icons-vue苦笑不得的乌龙

一、背景 node.js版本:v16.20.1 npm版本:8.19.4 pnpm版本:8.0.0 二、心路历程 pnpm install element-plus/icons-vue 用命令下载element-plus/icons-vue的时候,报错并提醒如图 是,我按照提示执行了,结…

基于腾讯云自然语言处理 NLP服务实现文本情感分析

文章目录 一、前言二、NLP 服务简介三、Python 调用腾讯云 NLP 服务 SDK 构建情感分析处理3.1 开通腾讯云 NLP 服务3.2 创建的腾讯云持久证书(如果已创建请跳过)3.2 在腾讯云服务器中安装 Git 工具以及 Python 环境3.3 安装 qcloudapi-sdk-python3.4 部署…

JRT人大金仓测试

之前基于IRIS导出的Sql脚本用JRT的导表脚本执行Sql语句在PostGreSql数据库把IRIS导出的库还原。并且试了模板设计器的打开和保存及打印功能。本次测试IRIS导出的Sql在人大金仓上还原数据库,并且测试模板设计器功能和打印。 首先碰到的一个坑是人大金仓把空串存成NU…

【js逆向】scrapy基础

目录 一, 爬虫工程化 二, scrapy简介 三, Scrapy工作流程(重点) 四, scrapy安装 4.1 pip 安装 4.2 wheel安装 五, Scrapy实例 六, 自定义数据传输结构item 七, scrapy使用小总结 一, 爬虫工程化 在之前的学习中我们已经掌握了爬虫这门技术需要的大多数的技术点, 但是我…

LabVIEW传感器通用实验平台

LabVIEW传感器通用实验平台 介绍了基于LabVIEW的传感器实验平台的开发。该平台利用LabVIEW图形化编程语言和多参量数据采集卡,提供了一个交互性好、可扩充性强、使用灵活方便的传感器技术实验环境。 系统由硬件和软件两部分组成。硬件部分主要包括多通道数据采集卡…

代码随想录 Leetcode538. 把二叉搜索树转换为累加树

题目: 代码(首刷看解析 2024年1月31日): class Solution { public:int pre 0;TreeNode* convertBST(TreeNode* root) {if (!root) return nullptr;root->right convertBST(root->right);if (pre 0) {pre root->val;}else {root…

【百度Apollo】轨迹绘制:探索路径规划和可视化技术的应用

🎬 鸽芷咕:个人主页 🔥 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想,就是为了理想的生活! ⛳️ 推荐 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下…

2024.1.28 GNSS 学习笔记

1.基于 地球自转改正卫地距 以及 伪距码偏差 重构定位方程: 先验残差计算公式如下所示: 2.观测值如何定权?权重如何确定? 每个卫星的轨钟精度以及电离层模型修正后的误差都有差异,所以我们不能简单的将各个观测值等权…

Kafka-服务端-PartitionLeaderSelector、ReplicaStateMachine

PartitionLeaderSelector 通过对前面的分析可知,PartitionMachine将Leader副本选举、确定ISR集合的工作委托给了PartitionLeaderSelector接口实现,PartitionMachine可以专注于管理分区状态。这是策略模式的一种典型的应用场景。 图展示了PartitionLead…

房屋租赁系统-java

思维导图:业务逻辑 类的存放: 工具类 Utility package study.houserent.util; import java.util.*; /***/ public class Utility {//静态属性。。。private static Scanner scanner new Scanner(System.in);/*** 功能:读取键盘输入的一个菜单…

【行业应用-智慧零售】东胜物联餐饮门店智能叫号解决方案,为企业智能化升级管理服务

随着科技的不断进步,物联网设备已经广泛应用于各行各业,包括餐饮业。在餐饮门店的线下运营过程中,叫号系统是一项重要的设备需求。传统的叫号方式往往会消耗大量的人力和时间,而物联网技术为餐饮行业提供了一种更高效、智能化的解…