使用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。

相关文章
|
18天前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架革新
Vue 3:下一代前端框架革新
248 106
|
18天前
|
JavaScript 前端开发 编译器
Vue 3:下一代前端框架的革新
Vue 3:下一代前端框架的革新
212 103
|
18天前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
214 104
|
18天前
|
JavaScript 前端开发 API
Vue 3:下一代前端框架的革命
Vue 3:下一代前端框架的革命
174 102
|
18天前
|
JavaScript 前端开发 算法
Vue 3:下一代前端框架的革命性进化
Vue 3:下一代前端框架的革命性进化
266 103
|
18天前
|
JavaScript 前端开发 编译器
Vue 3:现代前端开发的新范式
Vue 3:现代前端开发的新范式
187 104
|
18天前
|
JavaScript 前端开发 编译器
Vue 3:下一代前端框架革新
Vue 3:下一代前端框架革新
186 104
|
2月前
|
JavaScript 前端开发 API
Vue 3:现代前端开发的革新之作
Vue 3:现代前端开发的革新之作
|
2月前
|
JavaScript 前端开发 安全
Vue 3:现代前端开发的全新体验
Vue 3:现代前端开发的全新体验
|
2月前
|
JavaScript 前端开发 API
Vue 3:现代前端开发的全新体验
Vue 3:现代前端开发的全新体验

热门文章

最新文章