使用Vite快速构建前端Vue3项目,感受更轻更快的开发体验

简介: vite是一种全新的前端构建工具,由于vite是一个基于原生ESM的开发服务器,多以它能给用户带来更轻更快的开发体验。本篇文章带大家使用vite构建VUE项目,用了之后就知道有多香~

前言

vite是一种全新的前端构建工具,由于vite是一个基于原生ESM的开发服务器,多以它能给用户带来更轻更快的开发体验。本篇文章带大家使用vite构建VUE项目,用了之后就知道有多香~

创建vue项目

打开cmd进入想创建项目的目录
输入指令

npm init vite hello-vue3 -- --template vue

在这里插入图片描述
然后按上面提示输入指令
在这里插入图片描述

在浏览器中打开这个地址
在这里插入图片描述
出现这个页面,就说明创建了一个vue3+vite的项目,怎么样是不是比使用脚手架cli快不少

创建其它项目

上面我们举例说明了使用vite创建vue3项目,我们还可以使用vite创建其它框架的项目,使用的指令就不一样
输入指令:

npm create vite@latest

然后就可以看到其它可供选择的选项
在这里插入图片描述
当然可以选择vue+ts进行构建

vite和vue-cli4的区别

vue-cli基于webpack构建,并且有一些默认的预设配置,在服务启动之前会把所有代码打包成bundle,然后启动服务,提供给浏览器使用,所以vue-cli4在开发一些大型项目的时候,越到后面服务启动的越慢。
vite为了解决服务器动慢的问题,使用的ESbuild预编译依赖,比JS编写的打包器构建依赖要快很多倍。为了避免每次启动项目的时候要重建整个包,Vite把预构建的回来缓存到了node_modules/.vite。

相关文章
|
29天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
105 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
1月前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
45 5
|
29天前
|
JavaScript 前端开发 测试技术
构建高效可维护的前端应用
构建高效可维护的前端应用
|
1月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
36 1
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合?
前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
28 1
|
1月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
212 0