Vue3 中 Vite 和 Vue-cli 的特点和区别

简介: Vue3 中 Vite 和 Vue-cli 的特点和区别

1. 创建3.0项目

  1. vue-cli : 安装并执行 npm init vue@latest

选择项目功能时: 除了第一项的项目名字外,其他可以暂时No

cd title
npm install
npm run dev :运行
npm run build: 打包 (生成一个dist文件夹)
  1. vite: 使用vite 体验更快速
npm init vite-app title
cd title
npm install
npm run dev

title 代表创建 Vue3 项目的文件夹名称

Vite 与 Vue-cli 是什么?

Vue-cli 的特点:

是Vue2.0最棒的前端构建工具,是WebPack的超集


Vue-cli 基于WebPack构建,配置好了打包规则


内置了热模块重载的开发服务器


有丰富的官方插件合集,站在webpack庞大的社区资源上


友好的图形化创建和管理Vue项目界面 : vue ui


vue-cli在(前端)服务启动之前,要把所有代码打包成Bundle再启动服务,这也是为什么一个些大型项目 启动时,特别慢的原因。这一点在Vite做了大幅度改善。


Vite 的特点:

Vite是Vue团队开发的新一代前端开发与构建工具,vite不是基于webpack,

它为了解决项目启动慢的问题,vite通过一开始将应用中的模块分为依赖和源码两类,改进了开发服务器的启动慢的特点;


依赖: 大多为在开发时,不会变动的纯js,一些较大的依赖(例如有上百个模块的组件库:element-ui) ,处理的代价很高。依赖通常会存在多种模块化的格式.vite会使用esbuild预构建依赖,esbuld使用Go编写,并且比 js编写的打包器,速度快10-100倍;


源码: 通常包含一些并非直接是js的文件,需要转换,时常被编译。同时,并不是所有的源码都需要同时被加载。(例如:基于路由拆分的代码模块)。


以上: 这就是为什么vite启动快的原因;


Vite 和 Vue-cli的区别:


vite是基于原生Es6 Modules,在生产环境下打包使用的Rollup;


vue-cli基于webpack封装,生产环境和开发环境都是基于webpack打包;


所以两者在生产环境都是基于源代码的文件打包。


在开发环境中,Vite是基于原生的es6,无需对代码进行打包,浏览器可以直接调用,所以说vite因为基于浏览器的原生功能,省掉了打包过程,在开发环境中体验极好;


vite会取代vue-cli吗? 尤雨溪(Evan You)在Twitter上说:


起初我不确定,但在这个阶段,我相信最终会是这样。


总结:

以上就是 vue3 中Vite 和 Vue-cli的特点和区别,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。


相关文章
|
测试技术 应用服务中间件 Apache
QPS、TPS、并发用户数、吞吐量等定义
QPS (Queries Per Second) 是每秒查询率 ,是一台服务器 每秒能够相应的查询次数,是对一个特定的查询服务器在规定时间内 所处理流量多少的衡量标准, 即每秒的响应请求数,也即是最大吞吐能力。
5235 0
uniapp实现微信扫二维码进行核销
uniapp实现微信扫二维码进行核销
895 0
|
安全 大数据 网络安全
阿里云国际版免实名注册账号,支持多种支付方式
阿里云国际版账号是需要通过阿里云渠道商来实现注册认证的,本篇文章就介绍一家这样的阿里云国际版渠道商1788yun.com,通过它,实现无需PayPal信用卡,无门槛注册买阿里云国际版的产品与服务。
阿里云国际版免实名注册账号,支持多种支付方式
|
网络协议 网络虚拟化 数据安全/隐私保护
eNSP基本命令大全
eNSP基本命令大全
1450 0
|
JavaScript 搜索推荐 API
【Ant Design Vue V3版本填坑记录三】一套代码实现表格常用属性
【Ant Design Vue V3版本填坑记录三】一套代码实现表格常用属性
2775 0
|
机器学习/深度学习 数据采集 人工智能
快瞳AI鱼类识别 —— AI赋能海洋生物智能监测
鱼类AI识别技术基于深度学习算法,通过大量鱼类图像训练,实现对鱼类的快速精准识别。该技术模仿人类视觉系统,利用卷积神经网络(CNN)提取鱼体特征,从浅层的鳞片纹理到深层的整体形态逐步分析。快瞳科技提出的MF-Net模型突破了鱼类种类繁多、数据不均衡等难点,通过多阶段特征融合、动态权重调整及三维特征建模,显著提升识别性能。这项技术不仅重塑水产科研方式,还为海洋生物多样性保护提供智能化解决方案,推动AI在生态保护领域的应用迈入新阶段。
1583 6
|
运维 Cloud Native 前端开发
如何解决 503 Service Temporarily Unavailable?
如何解决 503 Service Temporarily Unavailable?
3437 0
C/C++语言交换两个变量的七种方法
C/C++语言交换两个变量的七种方法
1583 0
C/C++语言交换两个变量的七种方法
|
数据采集 运维 数据管理
数据管理能力成熟度模型
为促进大数据产业持续深入发展,提高政府、企事业单位大数据资产管理意识,借鉴国内外成熟度相关理论思想,结合数据生命周期管理各个阶段的特征,对数据管理能力进行了分析、总结,提炼出组织数据管理的八大过程域,并对每项能力进行了二级过程域和发展等级的划分以及相关功能介绍和评定标准的制定。
2106 1
|
安全 测试技术 数据库
测试流程规范--准入准出规则
为了加强测试部软件测试的质量控制及与测试相关部门、人员更好理解测试各阶段的准入/准出条件而建立的准入/准出规范。
3616 0
测试流程规范--准入准出规则

热门文章

最新文章