Vite快速开发入门（技术栈方向：Vue3.x+Vite）

实习公司技术栈要求使用Vue3+Vite进行开发，当时学习过程中主要使用的是Vue2.x，一进去就用新的版本进行开发，略微感觉不适（其实是害怕自己搞不懂哈哈哈），还好3.0是兼容2.x的，只能在开发过程慢慢摸索学习。难得假期有空记录一下入门过程，顺便理清楚一些细节。

初次接触Vite，Vite是什么?

vite 官网首页的描述：下一代前端开发与构建工具

Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：
一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如速度快到惊人的模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
Vite 意在提供开箱即用的配置，同时它的插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。
来源链接: Vite中文网.

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 基于原生 ES-Module 的前端构建工具。

有点类似于Vue-Cli脚手架，都是前端开发构建工具，但具体内容却大相径庭，vue-cli是基于webpack构建的，主要配合vue版本为2.x，
而尤大新开发的这个vite它使用 Rollup 打包，旨在脱离webpack进行更快速的开发，配合vue版本为3.x。
同时，它有自己的开发服务器，利用浏览器中的原生 ES 模块，这种架构使得 Vite 比 Webpack 的开发服务器快了好几个数量级。

Vue 3.X + Vite 快速尝鲜！（正文）

vue3.2和vite2.0（最新版本：setup语法模板）

1.直接初始化vite项目：（不需要像vue-cli那样进行全局安装）

//		两种命令结果相同
npm init vite@latest  		  /*源自官方*/
npm init vite <project-name> /*中括号内为项目名称*/

2.根据提示进行操作

3.运行项目结果
注意：这里安装项目工具的构建版本为vue3.2和vite2.0
到此就可以开始进行开发了

下面分享一下其他版本安装方法（源自社区或其他旧版）：

vue3.0+vite

1.全局安装vite

//		可以在全局目录中看到create-vite-app目录
npm install -g create-vite-app

2.初始化vite项目

//		两种命令结果相同
//		npm init vite-app <project-name>
npm init vite-app viteappdemo
//		create-vite-app <project-name>
create-vite-app viteappdemo

注意：这里安装项目工具的构建版本为vue3.0和vite1.0
此版本的JS模板为了兼任vue2.0的写法，暂时不是setup语法糖，如果从旧版本过来的伙伴建议还是直接学习vue3的语法模板，尽快脱离2.x旧版。

在该安装方法中我们可以看到 npm WARN警告说明该指令已经或者正在被弃用
根据命令行推荐的命令进行安装的版本也是最新的
所以推荐使用最新命令npm init vite进行安装

肤浅地对比一下Vite和Vue-Cli

首先是初始化项目的运行时间：
vite为346ms，而1497ms（也有可能因为vue-cli带的插件比较多）
但实际体验就是vite太快了。。。

接着对比全局安装包
从全局路径的根目录下看到
@vue的占用空间为162MB，而create-vite-app的只有564kb
（而且最新版本的安装方式不需要进行全局安装，可以直接通过npm初始化）

然后再对比一下两种构建工具初始化项目的大小
可以看到vue-cli项目占用空间为153MB，而vite项目为39.1MB

通过以上简要的对比可知，vite可真是短小精悍！

总结

要知道vite2.0的稳定版本之后不单单只是支持vue3，它将逐渐脱离vue框架（这里可能形容的不够恰当，还不知道怎么描述好一点），对主流框架进行支持，包括vanilla、react、svelte等等。
不出意外，应该是主流了，
简单来说，上手用就对了。

扩展推荐
链接: [译]Vue官方成员：Vite生态发展的怎么样了.
链接: Vite和Vue CLI的优劣.
链接: ①Vue3 使用Vite或@vue/cli 创建项目.