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


相关文章
|
13天前
|
资源调度 JavaScript 前端开发
创建vue3项目步骤以及安装第三方插件步骤【保姆级教程】
这是一篇关于创建Vue项目的详细指南,涵盖从环境搭建到项目部署的全过程。
68 1
|
2月前
|
JavaScript API 数据处理
vue3使用pinia中的actions,需要调用接口的话
通过上述步骤,您可以在Vue 3中使用Pinia和actions来管理状态并调用API接口。Pinia的简洁设计使得状态管理和异步操作更加直观和易于维护。无论是安装配置、创建Store还是在组件中使用Store,都能轻松实现高效的状态管理和数据处理。
129 3
|
3月前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
67 8
|
3月前
|
存储 JavaScript 数据管理
除了provide/inject,Vue3中还有哪些方式可以避免v-model的循环引用?
需要注意的是,在实际开发中,应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时,要综合考虑代码的可读性、可维护性和性能等因素,以确保系统的稳定和高效运行。
56 1
|
3月前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性,在处理一些复杂的组件间通信问题时,可以提供一种灵活的解决方案。通过合理使用它们,可以帮助我们更好地避免`v-model`的循环引用问题,提高代码的质量和可维护性。
63 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
134 1
|
12天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
37 8
|
13天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
52 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
107 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。