Vue3/ Vite 的使用介绍 、Vite 方式工作流程 与 传统方式工作流程区别

news2024/11/28 4:34:31

 一. Vite 的使用介绍

优势: 

  • 💡极速的服务启动 使用了原生的 ESM文件 无需打包

  • ⚡️ 轻量快速的热重在 始终极快的模块热重载

  •  🛠️丰富的功能 对于 typescript jsx css 等支持开箱即用

  • 📦 等等

二.Vite 方式工作流程 与 传统方式工作流程区别

传统方式:

  • 基于打包器的方式启动 必须优先抓取并构建整个应用 然后才能提供服务
  • 更新速度会随着应用体积增长而直线下降

 Vite方式:

  • Vite以 原生ESM 方式提供源码 实际上是让浏览器接管了 打包程序的部分工作

  • Vite只需要在浏览器 请求源码时 进行转换并按需提供源码

  • 根据场景动态导入代码 即只在当前屏幕上实际使用时才会被处理

总结:

  1. 使用webpack能否创建vue3的项目

Vue2时是采用的vue-cli 作为构建工具 底层基于webpack

     2. vue-cli 既可以开发Vue2项目又可以开发Vue3项目 创建项目时选择一下即可 

     3. vite开发基于浏览器原生es6 module 所以启动速度极快 生成环境使用 rollup另一款打包工具

 vue-cli 不管是 生产还是开发环境都是基于webpack打包 开发前需要把所有文件先打包才能启动服务 虽然说有热更新 项目大了之后 一样卡 

     4. 现在vite刚出来不久 ,生态环境不成熟 (就是说周边的插件比较少) 而webpack存在的时间长 周边生态非常完善 适用于企业级项目

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

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

相关文章

千万不要把Request传递到异步线程里面!有坑!

前几天在网上冲浪的时候看到一篇技术文章,讲的是他把一个 request 请求传递到了线程池里面,然后遇到了一个匪夷所思的情况。 他写了这篇文章,把自己针对这个问题的探索过程分享了出来: 《springboot 中如何正确的在异步线程中使用…

ACL命名实验

目录 一.ACL命名实验 1.实验要求: 2.配置全网通 配置主机地址 3.根据实验要求配置ACL 4.测试完成后再根据下一次要求继续配置 一.ACL命名实验 实验图片 1.实验要求: 要求 全网通 服务器上配置 web 服务和 ftp 服务 配置 命名的acl 列表 …

_Linux 进程信号-信号保存篇

文章目录前言阻塞信号1. 信号常见概念2. 在内核中的表示信号处理过程3. sigset_t4. 信号集操作函数sigprocmasksigpending5. 测试与验证实验一实验二实验三前言 上篇文章(链接: _Linux 进程信号-基础篇)我们了解了信号的基础概念以及信号如何发送的。 …

强化学习_06_pytorch-PPO实践(Pendulum-v1)

一、PPO简介 TRPO(Trust Range Policy Optimate)算法每一步更新都需要大量的运算,于是便有其改进版本PPO在2017年被提出。PPO 基于 TRPO 的思想,但是其算法实现更加简单。TRPO 使用泰勒展开近似、共轭梯度、线性搜索等方法直接求解。PPO 的优化目标与 T…

可观测性--数据源

文章目录监控数据来源端上访问应用程序业务监控基础设施可观测性核心概念日志(Logging)统计指标(Metrics)链路追踪(Tracing)三者之间关系监控数据来源 我们一般讲的数据观测,其实观测的就是从发…

【Linux】计算机软硬件体系结构

文章目录冯诺依曼体系结构操作系统(Operator System)什么是操作系统为什么要有操作系统操作系统是怎么实现管理的系统调用接口和库函数总结冯诺依曼体系结构 谈到计算机的硬件结构,第一个想到的必然是经典的冯诺依曼体系结构: 我们常见的计算机&#xf…

在购买低代码产品时,源码是必需的吗?

编者按:企业在采购软件或者平台时,到底需不需要源码?本文分析了源码交付的对于不同规模和情况企业的意义,并介绍了源码交付的低代码平台。关键词:源码交付,可视化设计,私有化部署,多…

数据上线:首届6G智能无线通信系统大赛OPPO赛道评测正式开启

12月26日,首届6G智能无线通信系统大赛——面向小样本条件场景自适应及在线更新需求的无线AI设计赛题已经正式上线,数据集也已经在1月3日正式上线啦,评测同步开启,快来打擂冲榜! 文末还将揭晓本赛题专属活动&#xff0…

图像锐化处理之一阶微分算子

图像锐化是通过增强图像的边缘和细节来提高图像的清晰度的操作。这种操作通常用于将模糊或不清晰的图像改进为更清晰的图像。由于微分是对函数局部变化率的一种描述,因此图像锐化算法的实现可基于空间微分。 一阶微分算子 对任意一阶微分的定义必须满足两点&#xf…

采用热电偶温度传感器实现超高精度温度跟踪控制的解决方案

摘要:针对温度跟踪控制中存在热电堆信号小致使控制器温度跟踪控制精度差,以及热电阻形式的温度跟踪控制中需要额外配置惠斯特电桥进行转换的问题,本文提出相应的解决方案。解决方案的核心是采用一个多功能的超高精度PID控制器,具有…

ubuntu18.04安装mysql5.7.32

目录一、下载mysql安装包二、下载依赖三、安装mysql四、导入sql一、下载mysql安装包 下载地址:https://downloads.mysql.com/archives/community/ 下载包 mysql-server_5.7.32-1ubuntu18.04_amd64.deb-bundle.tar 下载后解压,里面包含要安装的deb包 二、…

计算机编码

字符的表示原理 计算机内所有信息都是使用0和1进行表示的。 对于一个短路来说,0代表关,1代表开。那把这些电路组合起来就可以有长串0和1组成的二进制数字,我们对这些数字进行编码和解码,我们就能用它来表示我们想要表示的东西了…

蓝牙模块芯片串口透传的AT指令模式和波特率是什么意思

一、什么是蓝牙串口透传模块的模式 蓝牙串口模块,一般都会有两个模式,即AT指令模式,以及透传模式 1、有的模块,会通过一个GPIO口来选择当前是什么模式,比如将一个IO口拉低则进入透传模式,也就是不再识别A…

element-ui 表格el-table高度不是一个固定值时固定表头

elementui中为表格组件提供了height属性实现固定表头 height可以为数字或者字符串,当为一个数字时表示固定的高度,也可以为百分比等字符串。 当height不是一个固定值时,如期望表格可以填充完页面剩余空间,并且固定表头时&#x…

Mysql之常见可视化管理工具

mysql在日常开发中作为基础软件,对其数据的管理必不可少,除了系统自带的命令行管理工具之外,还有许多其他的图形化管理工具,下面介绍常见的mysql图形化管理工具。 1、Navicat Navicat 是一个桌面版 MySQL 数据库管理和开发工具。…

【Linux操作系统】程序的编译和动静态链接

文章目录一.编译写在前面1.预处理2.编译3.汇编二.(动静态)链接1.动态链接2.静态链接3.静态链接库的下载安装4.windows下动静态库的后缀一.编译 写在前面 编译这整个过程都只是在编译你自己写的代码,直到链接才让你的代码和库的代码关联起来,最终形成可执行程序 源程序到可执行…

靶机测试Os-ByteSec笔记

靶机测试Os-ByteSec笔记 靶机描述 Back to the Top Difficulty : Intermediate Flag : 2 Flag first user And second root Learning : exploit | SMB | Enumration | Stenography | Privilege Escalation Contact … https://www.linkedin.com/in/rahulgehlaut/ This w…

EXSi root密码忘记通过centos7镜像破解

1.安装软碟通UltraISO刻录U盘启动盘 下载阿里云centos7镜像,选择mini的链接:https://mirrors.aliyun.com/centos/7.9.2009/isos/x86_64/CentOS-7-x86_64-Minimal-2207-02.iso?spma2c6h.25603864.0.0.28f76aeapbXyYT 打开软碟通,打开下载的…

C语言宏定义立即数后缀U的含义

背景 在看开源的相关代码中,会有下面的宏定义用法 #define TEST_VALUE (0xFFFFFFFFU) 其和下面的宏定义区别是什么呢? #define TEST_VALUE (0xFFFFFFFF) 答疑 U表示 unsigned 无符号后缀,关于后缀的表述C99标准有如下定义&…

私有部署V3.8:自建内部应用库和预置应用

2022年12月27日,明道云私有部署V3.8正式发布。除了同步更新明道云SaaS版V7.8的功能以外,V3.8还将应用库功能下放至私有部署,私有部署用户可以自建企业内部应用库,并且给新创建的组织预置应用了。 注意:该功能仅面向明…