这篇文章给大家介绍了“Vite是什么，如何安装及使用”的相关知识，讲解详细，步骤过程清晰，有一定的借鉴学习价值，因此分享给大家做个参考，感兴趣的朋友接下来一起跟随小编看看吧。

什么是Vite?(是前端新玩具)

Vite是一个web开发构建工具，它通过本机 ES 模块导入在开发过程中更新代码，达到快速更新的目的。

特点

• 超快的冷服务器启动
• 即时的模块更新
• 真正的按需编译
• 更小的打包体积

开始使用

Vue用户注意：Vite当前仅适用于Vue3.x。这也意味着您不能使用尚未与Vue 3兼容的库。

安装

npm init vite-app <项目名称> 
cd <项目名称> 
npm install 
npm run dev
## 执行完以上命令，就意味着你的vue3.0项目已经用上了vite了

vite和webpack体验上有什么不同？

就vite目前给我的感觉，就是一个字，快。

• 初次启动调试服务的时候比webpack快了一倍。
• 打包的速度也快了一倍以上。
• 打包出来的文件的体积也是原来webpack的一半体积不到。

Vite是怎样工作的？

用作者的话来说，就是直接请求.vue文件，让浏览器进行解析

最新版的浏览器是支持直接使用import和export关键字了，也就是浏览器开始原生支持模块功能了，这也是Vite使用到的特性之一。

“说了那么多，不如抓个包看看？”

当然可以！在这里我只修改了HelloWorld.vue文件

然后我再次修改了App.vue文件 （不要在意时间戳不一样，我只是不小心删除了，然后又懒得重来）

到这里，相比对Webpack的Code Splitting实现按需加载的方式，Vite给我确实体验是快速了很多

最后

Vite虽然很爽，但是当前RC 1版本仅适用于Vue3.x，不能使用和Vue3不兼容的库。（速度肯定是比webpack快的，各方面）

以上就是关于“Vite是什么，如何安装及使用”的介绍了，感谢各位的阅读，希望这篇文章能帮助大家解决问题。如果想要了解更多知识，欢迎关注群英网络，小编每天都会为大家更新不同的知识。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• Vue.js中的高级面试题及答案

  Vue-loader 是 Webpack 的加载模块，它使我们可以用 Vue 文件格式编写单文件组件。单文件组件文件有三个部分，(模板、脚本和样式)。 vue-loader 模块允许 webpack

• 如何利用three.js实现3d全景的效果，方法是什么

  这篇文章主要为大家介绍了three.js实现3d全景看房示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

• 小程序登录界面的实现代码怎样写？

  这篇文章主要为大家详细介绍了微信小程序实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• js中常见的this面试题介绍，你能做对几道呢？

  在JavaScript中也有this关键字，器作用是函数调用上下文，而this的行为是比较复杂，在JavaScript面试上常会遇到，也是很多朋友很难理解的一个知识点，这篇文章就给大家分享一些关于JS中this关键词的面试题，对大家学习和理解this有一定的参考价值。

• TS中引用路径别名报错怎么回事，如何解决

  本文主要介绍了Typescript中使用引用路径别名报错的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧