这是我参与「第四届青训营 」笔记创作活动的第5天。

在之前的笔记中，我们已经了解了Vue CLI的基本使用。Vue CLI是一款非常优秀的Vue项目构建工具，但是它并不是唯一的。如果我们追求极致的项目构建速度，Vite将是一个非常不错的选择~

Vite与Vue CLI的比较

vite是什么？

• 它是一个更加轻量（热更新速度快，打包构建速度快）的vue项目脚手架工具。
• 相对于vue-cli它默认安装的插件非常少，随着开发过程依赖增多，需要自己额外配置。

Vue CLI非常适合大型商业项目的开发，它是构建大型Vue项目不可或缺的工具。Vue CLI主要包括工程脚手架、带热重载模块的开发服务器、插件系统、用户界面等功能。与Vue CLI类似，Vite也是一个提供项目脚手架和开发服务器的构建工具。不同的是，Vite不是基于Webpack的，它有一套自己的开发服务器，并且Vite本身并不像Vue CLI那样功能强大且完善，它只专注于提供基本的功能和开发服务器。因此，Vite更加小巧迅捷，其开发服务器比基于Webpack的开发服务器快10倍左右。这对开发服务者非常重要，因为开发服务器的响应速度直接关系到开发者的开发效率和编程体验。

总结一下：

Vue CLI 优点	Vue CLI 缺点
经历过长期战斗考验，可靠	开发服务器速度与依赖数量成反比
与Vue 2兼容
可以捆绑任何类型的依赖关系
插件生态系统
可以针对不同的目标进行构建

Vite 优点	Vite 缺点
开发服务器比Webpack快10-100倍	只能针对现代浏览器（ES2015+）
将code-splitting作为优先事项	与CommonJS模块不完全兼容
	处于测试阶段，仅支持Vue 3
	最小的脚手架不包括Vuex、路由器等
	不同的开发服务器与构建工具

快速使用Vite

兼容性注意：Vite 需要 Node.js 版本 >= 12.0.0。

确认当前使用的Node.js版本符合要求后，在终端执行如下指令来创建Vue项目工程：

npm init vite@latest

之后需要一步一步地选择一些配置项。要输入工程项目名称，选择使用的框架，这里选择Vue。

项目创建完成后，可以看到如下工程目录结构：

可以看到，该目录结构和Vue CLI构建的十分类似。

执行npm install安装依赖，然后执行npm run dev，即可开启开发服务器。