前言
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。