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

在本次青训营活动中，有一节课专门用来讲Vite的使用。身为前端小白，

什么是Vite？

以下定义摘自Vite官网

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：

• 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
• 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。

如果要我用一个字去概括Vite的话，那就是——快！恰巧，Vite的诞生也是为了解决传统方式慢的问题。

所谓慢，慢在：

• 很长时间才能启动开发服务器
• 热更新需要几秒钟才能在浏览器中反映出来

实战用Vite创建Vue项目

接下来我们将尝试使用Vite创建一个Vue项目：

1. 提前安装pnpm

npm i -g pnpm

2. 初始化命令

pnpm create vite

在初始化的过程中，会要求你输入项目名称、选择框架等，在选择框架时需使用键盘的↑、↓进行选择。

随后项目创建成功。

3. 进入项目目录并安装依赖

cd YOUR_PROJECT_FOLDER
pnpm install

4. 启动项目

npm run dev

来一张动图体会一下：

到这里我真的感觉到了Vite的快，也就是按了下回车，本地的dev server就立马起来了。

总结

很久以前笔者就听说过Vite的大名，终于在青训营中体验了一把。后续做项目，笔者会优先考虑用Vite进行构建项目，屏幕前的小伙伴怎么认为呢？