vite搭建vue3.0项目
pre:
● 环境要求： vite需要node.js版本 >= 12.0.0
● 检测node版本命令： cmd-> node -v -> enter
开始：
1、创建项目
使用npm方式
npm init vite@latest 项目名
使用yarn方式
yarn create vite 项目名
除此之外还可以用过附加命令行选项直接指定项目名称和模板。例如，要构建一个Vite + Vue项目，命令如下：
npm 6.x
npm init @vitejs/app my-vue-app --template vue
npm 7+,需要额外的双横线：
npm init @vitejs/app my-vue-app – --template vue
yarn
yarn create @vitejs/app my-vue-app --template vue
`
输入完命令后，按照提示操作即可。如果项目需要支持typescript，可以再初始化项目的时候选择vue-ts。项目创建好之后，可以发现vite所创建好的项目其实与使用vue-cli所创建的项目目录结构是差不多的。
npm init @vitejs/app project-name
or
yarn create @vitejs/app project-name(建议)`2、在select a template中选择vue或者vue-ts
3、按照提示执行命令：
cd project-name: 进入项目目录
yarn ：安装依赖包
yarn dev : 运行项目
注：vite是rollup的高阶封装，本质是rollup；vite在运行时不会对项目代码进行打包而是把这部分工作交给了浏览器，所以对浏览器要求是必须支持es module语法，目前大多数浏览器已经支持。所以vite比vue-cli快。
至此，一个vite搭建的vue项目就跑起来了，给我的感觉就是飞一般的快。
vite为什么这么快呢：
1、ES module 减少服务启动时间
● 由于大多数现代浏览器都支持上面的 ES module 语法，所以在开发阶段，我们就不必对其进行打包，这节省了大量的服务启动时间。另外，vite 按需加载当前页面所需文件，一个文件一个http请求，进一步减少启动时间。
2、缓存减少页面更新时间
● 每个文件通过 http 头缓存在浏览器端，当编辑完一个文件，只需让此文件缓存失效。当基于 ES module 进行热更新时，仅需更新失效的模块，这使得更新时间不随包的增大而增大。
3、按需加载
● vite通过按需加载减少等待时间
4、组件热更新
● vue 组件热更新，由serverPluginVue.ts、serverPluginHmr.ts、client.ts三个部分共同完成。其中client.ts会被发送到浏览器端，位于服务端的 serverPluginHmr.ts 通过 websocket 和 client.ts 进行通信。
