使用Vite快速构建前端Vue3项目，感受更轻更快的开发体验，前端最新技术尝试

发布时间：2023-01-10 10:30

前言

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。

使用Vite快速构建前端Vue3项目，感受更轻更快的开发体验，前端最新技术尝试

前言

创建vue项目

创建其它项目

vite和vue-cli4的区别

相关推荐