当前位置: 首页 > news >正文

[vue3] 使用 vite 创建vue3项目的详细流程

一、vite介绍

Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”) 是一种新型前端构建工具,能够显著提升前端开发体验(热更新、打包构建速度更快)。

二、使用vite构建项目

【学习指南】学习新技能最好的办法是——看官方文档:vite官网

1.运行创建项目命令

# 使用 npm
npm create vite@latest

2、填写项目名称 

62524c15c2e0491292b02553cd5f7e2c.png

3、选择前端框架

c7e30a0629434be1a097aa18a2784e88.png

4、选择语法类型

ceb2780b647d47a095a8df6b73662bd2.png

5、按提示运行代码

081c8be476324f7dbb371407468aaddd.png

 运行代码,即可运行项目如下图:

  cd vite-projectnpm installnpm run dev

5dfffec9b812424da68e857bd5eaf73f.png

三、vite 和 webpack 对比

1、Webpack:会先打包,然后启动开发服务器,请求服务器时直接给予打包结果。

将所有的模块提前编译、打包进 bundle 中,不管这个模块是否被用到,随着项目越来越大,打包启动的速度自然越来越慢。

使用 webpack 打包模式如下图:

39298a7a4d9e49798897d278dee16630.png

2、Vite:直接启动开发服务器,请求哪个模块再对该模块进行实时编译。

瞬间开启一个服务,并不会先编译所有文件,当浏览器用到某个文件时,Vite 服务会收到请求然后编译后响应到客户端。

使用 Vite 打包模式如下图:

4c7294755eb74506b4d4bc37c30270d2.png

3、vite 优点:

  • vite 服务器启动速度比 webpack 快;                                                                                由于vite启动的时候不需要打包,也就无需分析模块依赖、编译,所以启动速度非常快。当浏览器请求需要的模块时,再对模块进行编译,这种按需动态编译的模式,极大缩短了编译时间,当项目越大,文件越多时,vite的开发时优势越明显;
  • vite热更新比webpack快;                                                                                              vite在HRM方面,当某个模块内容改变时,让浏览器去重新请求该模块即可,而不是像webpack重新将该模块的所有依赖重新编译;
  • vite使用esbuild(Go 编写) 预构建依赖,而webpack基于nodejs, 比node快 10-100 倍;

4、vite 缺点:

  • 生态不及webpack,加载器、插件不够丰富;
  • 打包到生产环境时,vite使用传统的rollup进行打包,生产环境esbuild构建对于css和代码分割不够友好。所以,vite的优势是体现在开发阶段;
  • 没被大规模重度使用,会隐藏一些问题;
  • 项目的开发浏览器要支持esmodule,而且不能识别commonjs语法;

 

相关文章:

[vue3] 使用 vite 创建vue3项目的详细流程

一、vite介绍 Vite(法语意为 “快速的”,发音 /vit/,发音同 “veet”) 是一种新型前端构建工具,能够显著提升前端开发体验(热更新、打包构建速度更快)。 二、使用vite构建项目 【学习指南】学习新技能最…...

#HarmonyOS:软件安装window和mac预览Hello World

Window软件地址 https://developer.harmonyos.com/cn/develop/deveco-studio#download 安装的建议 这个界面这样选,其他界面全部按照默认路径往下走!!! 等待安装… 安装环境错误处理 一般就是本地node配置异常导致&#xff…...

nginx 一键切换停机维护页面 —— 筑梦之路

背景说明 进行停机维护或者系统升级等操作,会影响到用户使用,如果停机维护期间用户未看到停机维护的通知,仍去访问系统,会提示默认不太友好的访问错误界面 ,这时如果在维护的时候直接展示停机公告的具体信息&#xff0…...

Python作业答疑

1. 旋转字符串 1.1 问题描述 给定一个字符串(以字符数组的形式)和一个偏移量,根据偏移量原地从左向右旋转字符串。 1.2 问题示例 输入str"abcdefg",offset3,输出"efgabcd"。 输入str"ab…...

计算机网络实用工具之Hydra

简介 Hydra 是一个并行登录破解程序,支持多种协议进行攻击。它非常快速且灵活,并且很容易添加新模块。 该工具使研究人员和安全顾问能够展示远程未经授权访问系统是多么容易。 目前该工具支持以下协议: Asterisk, AFP, Cisco AAA, Cisco au…...

AUTOSAR 入门

前言 AUTOSAR是什么Vector DaVinci 工具功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个注脚注释也是必…...

新版IDEA中,module模块无法被识别,类全部变成咖啡杯无法被识

新版IDEA中,module模块无法被识别,类全部变成咖啡杯无法被识 如下图: 解决方法:java的Directory文件没有被设置为根目录,解决方法如下: 这是方法之一,还有很多的原因 可能的原因: …...

vue.js el-table 动态单元格列合并

一、业务需求: 一个展示列表,表格中有一部分列是根据后端接口动态展示,对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的,则正常展示,如果是’类型2‘的数据,则合并当前数据的动态表格。…...

word模板导出word文件

前期准备工作word模板 右键字段如果无编辑域 ctrlF9 一下&#xff0c;然后再右键 wps 直接 ctrlF9 会变成编辑域 pom.xml所需依赖 <dependencies> <!--word 依赖--> <dependency><groupId>fr.opensagres.xdocreport</groupId><artifactId…...

debianubuntu的nvidia驱动升级

背景 给出的机器的驱动版本不符合要求&#xff0c;使用自定义的驱动版本。 前置 如果使用nvidia官方的.run安装的驱动包&#xff0c;可以使用系统自带的nvidia-uninstall命令卸载比较方便&#xff0c;不建议使用apt pruge nvidia-*命令删除。会带来其他的问题。 卸载完成之…...

【开源视频联动物联网平台】视频接入网关的用法

视频接入网关是一种功能强大的视频网关设备&#xff0c;能够解决各种视频接入、视频输出、视频转码和视频融合等问题。它可以在应急指挥、智慧融合等项目中发挥重要作用&#xff0c;与各种系统进行对接&#xff0c;解决视频能力跨系统集成的难题。 很多视频接入网关在接入协议…...

【bug排查解决】现象级延迟8-10s

业务背景 最近公司在做物联网相关的项目&#xff0c;调试过程中发现好玩的bug。 首先一个数据采集场景&#xff0c;plc采集数据全链路&#xff1a; kepServer&#xff08;kepserver IOT gateway&#xff09; -> emqx &#xff08;查看日志&#xff09;-> iot服务 -> 业…...

【人生感悟】不能对一个人太好是有心理学原理的

1、不能对一个人太好是有心理学原理的&#xff0c;当你长期友善对待一个人时&#xff0c;如果这个人认知程度不是很高&#xff0c;层次稍微的偏低&#xff0c;那他可能直接把你的友善理解为理所应当&#xff0c;甚至是你在讨好他&#xff0c;还会把你们之间的关系理解成他是高于…...

动态规划学习——最长回文子序列,让字符串变成回文串的最小插入次数

一&#xff0c;最长回文串 1.题目 给你一个字符串 s &#xff0c;找出其中最长的回文子序列&#xff0c;并返回该序列的长度。 子序列定义为&#xff1a;不改变剩余字符顺序的情况下&#xff0c;删除某些字符或者不删除任何字符形成的一个序列。 示例 1&#xff1a; 输入&…...

CSS新手入门笔记整理:CSS列表样式

列表项符号&#xff1a;list-style-type 在HTML中&#xff0c;对于有序列表和无序列表的列表项符号&#xff0c;都是使用type属性来定义的。 语法 list-style-type:取值; list-style-type属性是针对ol或者ul元素的&#xff0c;而不是li元素。 有序列表属性 属性值 说明 …...

12月07日,每日信息差

以下是2023年12月07日的11条信息差 第一、社交媒体公司X计划在日本成立应用开发团队 第二、造车进程加快&#xff0c;小米汽车在多地招聘零售门店主管&#xff0c;零售门店主管工作地点涉及武汉、重庆、长沙、郑州、佛山、东莞、厦门等城市 第三、我国西南地区首座百万千瓦级…...

spring mvc理解

spring mvc M&#xff1a;model 模型 V&#xff1a;view 视图 C&#xff1a;controller 控制器 S: service 服务处理 D: Dao 数据持久化 视图 我理解就是web页面&#xff0c;帮助用户调用后端接口。 前后端分离之后&#xff0c;view似乎就和后端没什么关系了。 模型 格式…...

HTML-标签之文字排版、图片、链接、音视频

1、标签语法 HTML超文本标记语言——HyperText Markup Language 超文本是链接标记也叫标签&#xff0c;带尖括号的文本 2、HTML基本骨架 HTML基本骨架是网页模板 html&#xff1a;整个网页head&#xff1a;网页头部&#xff0c;存放给浏览器看的代码&#xff0c;例如CSSbody…...

圣诞将至—C语言圣诞树代码来啦

文章目录 圣诞将至—C实现语言圣诞树源码 圣诞将至—C实现语言圣诞树 圣诞树 源码 #define _CRT_SECURE_NO_WARNINGS#include <stdio.h> #include <math.h> #include <stdlib.h> #include <windows.h> #include <time.h> #define PI 3.14159265…...

Git常用命令#merge分支合并

要查看所有分支&#xff0c;包括本地和远程仓库的分支&#xff0c;可以使用以下命令&#xff1a; 1.查看分支 1.1 查看本地分支 git branch这个命令会列出本地所有的分支&#xff0c;当前所在的分支会有 * 标记。 1.2 查看远程分支 git branch -r这个命令会列出远程仓库的分…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

NXP S32K146 T-Box 携手 SD NAND(贴片式TF卡):驱动汽车智能革新的黄金组合

在汽车智能化的汹涌浪潮中&#xff0c;车辆不再仅仅是传统的交通工具&#xff0c;而是逐步演变为高度智能的移动终端。这一转变的核心支撑&#xff0c;来自于车内关键技术的深度融合与协同创新。车载远程信息处理盒&#xff08;T-Box&#xff09;方案&#xff1a;NXP S32K146 与…...

五子棋测试用例

一.项目背景 1.1 项目简介 传统棋类文化的推广 五子棋是一种古老的棋类游戏&#xff0c;有着深厚的文化底蕴。通过将五子棋制作成网页游戏&#xff0c;可以让更多的人了解和接触到这一传统棋类文化。无论是国内还是国外的玩家&#xff0c;都可以通过网页五子棋感受到东方棋类…...

Matlab实现任意伪彩色图像可视化显示

Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中&#xff0c;如何展示好看的实验结果图像非常重要&#xff01;&#xff01;&#xff01; 1、灰度原始图像 灰度图像每个像素点只有一个数值&#xff0c;代表该点的​​亮度&#xff08;或…...

结构化文件管理实战:实现目录自动创建与归类

手动操作容易因疲劳或疏忽导致命名错误、路径混乱等问题&#xff0c;进而引发后续程序异常。使用工具进行标准化操作&#xff0c;能有效降低出错概率。 需要快速整理大量文件的技术用户而言&#xff0c;这款工具提供了一种轻便高效的解决方案。程序体积仅有 156KB&#xff0c;…...

虚幻基础:角色旋转

能帮到你的话&#xff0c;就给个赞吧 &#x1f618; 文章目录 移动组件使用控制器所需旋转&#xff1a;组件 使用 控制器旋转将旋转朝向运动&#xff1a;组件 使用 移动方向旋转 控制器旋转和移动旋转 缺点移动旋转&#xff1a;必须移动才能旋转&#xff0c;不移动不旋转控制器…...