当前位置: 首页 > 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这个命令会列出远程仓库的分…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

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 位数字。 输…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

elementUI点击浏览table所选行数据查看文档

项目场景&#xff1a; table按照要求特定的数据变成按钮可以点击 解决方案&#xff1a; <el-table-columnprop"mlname"label"名称"align"center"width"180"><template slot-scope"scope"><el-buttonv-if&qu…...

【无标题】湖北理元理律师事务所:债务优化中的生活保障与法律平衡之道

文/法律实务观察组 在债务重组领域&#xff0c;专业机构的核心价值不仅在于减轻债务数字&#xff0c;更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明&#xff0c;合法债务优化需同步实现三重平衡&#xff1a; 法律刚性&#xff08;债…...