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


相关文章
|
3天前
|
JavaScript API
Vue3中的计算属性能否动态修改
【9月更文挑战第5天】Vue3中的计算属性能否动态修改
26 10
|
3天前
|
JavaScript API
如何使用Vue3的可计算属性
【9月更文挑战第5天】如何使用Vue3的可计算属性
38 13
|
3天前
|
资源调度 JavaScript API
vue3 组件通信方式
vue3 组件通信方式
27 11
|
3天前
|
缓存 JavaScript API
Vue3— computed的实现原理
【9月更文挑战第5天】Vue3— computed的实现原理
20 10
|
5天前
|
存储 JavaScript 前端开发
Vue 3的响应式系统是如何工作的呢
【9月更文挑战第3天】Vue 3的响应式系统是如何工作的呢
19 4
|
3天前
|
JavaScript
vue中使用@scroll不生效的问题
vue中使用@scroll不生效的问题
|
10天前
|
JavaScript 开发者
[译] 监听第三方 Vue 组件的生命周期钩子
[译] 监听第三方 Vue 组件的生命周期钩子
|
10天前
|
JavaScript 前端开发
[译] 复用 Vue 组件的 6 层手段
[译] 复用 Vue 组件的 6 层手段
|
2天前
|
数据采集 JavaScript 搜索推荐
我们一起聊聊如何对Vue项目进行搜索引擎优化
【9月更文挑战第4天】Vue 项目的搜索引擎优化(SEO)较为复杂,因其内容默认由 JavaScript 渲染,部分搜索引擎难以索引。为提升 SEO 效果,可采用服务器端渲染(SSR)或预渲染,使用 Nuxt.js 或 Vue Server Renderer 实现 SSR,或利用 Prerender SPA Plugin 预渲染静态 HTML。此外,动态管理 Meta 标签、优化静态内容与 Sitemap、懒加载、图片优化、提升页面速度、设置正确的路由模式、使用结构化数据及构建良好外链均有益于 SEO。
35 11
|
6天前
|
存储 JavaScript
vue组件的五种传值方法(父子\兄弟\跨组件)
vue组件的五种传值方法(父子\兄弟\跨组件)
下一篇
DDNS