1.介绍
官网地址：cn.vitejs.dev/
下一代前端开发与构建工具
Vite (法语意为 "快速的"，发音
/vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
- 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
- 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
目的就是：提升项目打包构建速度，获取更快的速度，提升构建效率
当冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务。
Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。
Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理
目前打包器支持了动态模块热重载（HMR），在实践中我们发现，即使采用了 HMR 模式，其热更新速度也会随着应用规模的增长而显著下降。
2.搭建项目
使用 NPM:
$ npm init vite@latest
vite目前支持很多模板
支持的模板预设包括：
vanillavanilla-tsvuevue-tsreactreact-tspreactpreact-tslit-elementlit-element-tssveltesvelte-ts
看到vanilla特意查了一下，发现给忽悠了~~~
Vanilla JS是世界上最轻量的javascript 框架（沒有之一）
Vanilla JS的另一个名字是Javascript。。。。。。
参考文章：segmentfault.com/a/119000000…
create-vite 是一个快速生成主流框架基础模板的工具。查看 Awesome Vite 仓库的 社区维护模板，里面包含各种工具和不同框架的模板。你可以用如 degit 之类的工具，使用社区模版来搭建项目。
npx degit user/project my-project
cd my-project
npm install
npm run dev
如果该项目使用 main 作为默认分支, 需要在项目名后添加 #main。
npx degit user/project#main my-project
3.启动项目
项目结构
由于模板使用的是vue3，vue3已经支持组件template下多根写法，不用像以前一样用一个div包着，所以用vscode打开这个文件的话，如果你安装了vetur插件就会报多根错误，建议去设置里面关掉这个选项，就可以不会报错！
设置中选择将工作区设置修改，这个取消勾选即可
启动项目后发现，项目启动极快，不同于webpack项目构建速度，要处理很多文件（包括静态文件），将其全部重新构建。
可以看到默认启动命令不带network访问的，我们可以如此设置下
之后启动npm run host
参考方式：blog.csdn.net/qq_41664096…
4.体验项目
修改组件helloword
效果：十分快
这个项目写法采用vue3，setup函数的运用，虽然我自己没怎么写过，但是确实种写法更加方便组件化开发，可以很好隔开一个组件内使用另外一个组件时候，造成的代码混乱问题。
和webpack区别
推荐文章：
总之vite作为目前新生的构建工具，Vite 太快了！
