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的特点和区别,不懂得也可以在评论区里问我或私聊我询问,以后会持续发布一些新的功能,敬请关注。


相关文章
|
2月前
|
JavaScript 前端开发 安全
Vue 3
Vue 3以组合式API、Proxy响应式系统和全面TypeScript支持,重构前端开发范式。性能优化与生态协同并进,兼顾易用性与工程化,引领Web开发迈向高效、可维护的新纪元。(238字)
568 139
|
2月前
|
缓存 JavaScript 算法
Vue 3性能优化
Vue 3 通过 Proxy 和编译优化提升性能,但仍需遵循最佳实践。合理使用 v-if、key、computed,避免深度监听,利用懒加载与虚拟列表,结合打包优化,方可充分发挥其性能优势。(239字)
265 1
|
3月前
|
开发工具 iOS开发 MacOS
基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
最新版研发vite7+vue3.5+pinia3+arco-design仿macos/windows风格网页版OS系统Vite-Vue3-WebOS。
429 11
|
2月前
|
JavaScript 安全
vue3使用ts传参教程
Vue 3结合TypeScript实现组件传参,提升类型安全与开发效率。涵盖Props、Emits、v-model双向绑定及useAttrs透传属性,建议明确声明类型,保障代码质量。
297 0
|
4月前
|
缓存 前端开发 大数据
虚拟列表在Vue3中的具体应用场景有哪些?
虚拟列表在 Vue3 中通过仅渲染可视区域内容,显著提升大数据列表性能,适用于 ERP 表格、聊天界面、社交媒体、阅读器、日历及树形结构等场景,结合 `vue-virtual-scroller` 等工具可实现高效滚动与交互体验。
480 1
|
JavaScript
vite-Vue的无捆绑开发服务
vite-Vue的无捆绑开发服务
172 0
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
341 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
318 137
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
824 0
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能

热门文章

最新文章