本文整理来自深入Vue3+TypeScript技术栈-coderwhy大神新课，只作为个人笔记记录使用，请大家多支持王红元老师。
Vue CLI脚手架
什么是Vue脚手架？
我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成所有的webpack配置，这样显示开发的效率会大大的降低。所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架。脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架。
Vue的脚手架就是Vue CLI，CLI是Command-Line Interface，翻译为命令行界面。我们可以通过CLI选择项目的配置和创建出我们的项目，Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置。
Vue CLI 安装和使用
安装Vue CLI（目前最新的版本是v4.5.13），我们进行全局安装，这样在任何时候都可以通过vue的命令来创建项目。
npm install @vue/cli -g
如果是比较旧的版本，可以通过下面的命令来升级Vue CLI：
npm update @vue/cli -g
通过Vue的命令来创建项目：
vue create 项目的名称
vue create 创建项目的过程
项目的目录结构
我们可以发现，脚手架创建的项目没有了webpack.config.js文件了，这是因为我们使用脚手架一般不需要再去知道 webpack 做了什么，所以没有暴露 webpack 的配置文件，但你依然可以创建 vue.config.js 去修改默认的 webpack 配置。
项目的脚本文件如下，执行npm run serve即可运行项目。
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
Vue CLI的运行原理
以前我们不使用脚手架创建项目的时候，当我们执行npm run serve，其实会从node_modules/.bin里面执行webpack命令，webpack命令会加载webpack.config.js从而对项目进行打包。
同理，当我们使用脚手架，执行npm run serve，也会从node_modules/.bin里面执行vue-cli-service命令，然后具体流程如下：
认识Vite
Webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具，比如rollup、parcel、gulp、vite等等。
什么是vite呢？
官方的定位：下一代前端开发与构建工具；
如何定义下一代开发和构建工具呢？
我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等。所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel。但是随着项目越来越大，需要处理的JavaScript呈指数级增长，模块越来越多，构建工具需要很长的时间才能开启服务器，HMR也需要几秒钟才能在浏览器反应出来，所以也有这样的说法：天下苦webpack久矣。
Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。
Vite的构造
它主要由两部分组成：
- 开发的时候：一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；
- 打包的时候：一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源；
目前是否要大力学习vite？vite的未来是怎么样的？
我个人非常看好vite的未来，也希望它可以有更好的发展。但是，目前vite虽然已经更新到2.0，依然并不算非常的稳定，并且比较少大型项目（或框架）使用vite来进行构建。vite的整个社区插件等支持也还不够完善，包括vue脚手架本身，目前也还没有打算迁移到vite，而依然使用webpack（虽然后期一定是有这个打算的）。所以vite看起来非常的火热，在面试也可能会问到，但是实际项目中应用的还比较少。
浏览器原生支持模块化
其实我们现在很新的浏览器是支持ES Module的，新建一个空项目，新建math.js文件，编写如下代码：
export function sum(num1, num2) {
return num1 + num2;
}
新建main.js文件，编写如下代码：
import { sum } from './js/math.js';
console.log("Hello World");
console.log(sum(20, 30));
新建index.html，引入main.js文件：
Document
//指定type="module"
浏览器打开index.html即可正常打印了，这时候一个js文件其实就是一个module。
上面代码有两点注意：
- 导入的时候一定要带后缀名，比如：
import { sum } from './js/math.js';的.js不能省略，这是因为我们是原生的模块，没有webpack路径查找规则的那些东西。 - script标签一定要指定type="module"，比如：
。
通过上面代码，我们不使用构建工具，直接编写ES module的代码，不是也能运行嘛，等到真正要上线的时候，因为要适配更多的浏览器，我们再进行ES6->ES5的这些转换，这样就省了很多构建的过程，不是更高效嘛！这个想法也是Vite想的。
但是如果我们不借助于其他工具，直接使用ES Module来开发有什么问题呢？
- 首先，我们的代码中如果有TypeScript、less、vue等代码时，浏览器并不能直接识别。
- 其次，我们会发现在使用loadash时，加载了上百个模块的js代码，也就是会发送上百个浏览器请求，对于浏览器是巨大的消耗。
事实上，vite就帮助我们解决了上面的所有问题。
Vite会将我们的TypeScript、less、vue等代码进行转换，但是转换成的不是最终的代码，只是转换成ES Module的代码，等到真正上线的时候才转换成最终的代码。
Vite的安装和使用
Vite本身也是依赖Node的，所以也需要安装好Node环境，并且Vite要求Node版本是大于12版本的。
首先，我们安装一下vite工具：
npm install vite –g # 全局安装
npm install vite –D # 局部安装，推荐局部安装
通过vite来启动项目：
npx vite
终端打印：
可以发现Vite已经支持我们的项目了，打开http://localhost:3000，即可访问我们的项目。
项目打印如下：
打印可见Vite连接成功，已经支持我们的项目。Vite通过它搭建的服务为我们项目提供服务，搭建的服务通过对我们项目的src进行构建，然后浏览器访问的时候访问的是搭建的本地服务，搭建的本地服务再给浏览第提供源代码。
Vite构建和上面原生模块化有区别：
- 我们不需要使用后缀名了，因为Vite会给我们添加，比如：
import { sum } from './js/math'; - 原生模块化会有很长的路径，如果是Vite，Vite有路径解析，直接写模块名就行了。
- 使用loadash也不会发送上百个浏览器请求了，因为Vite会进行打包，只发送一个大的请求就行了。
Vite对css的支持
- Vite直接支持css的处理，直接导入css即可，因为Vite默认就给我们配置好一些loader了。
- Vite直接支持css预处理器，比如less，虽然不用我们配置，但是需要我们安装：
npm install less -D
- Vite直接支持postcss的转换，只需要安装postcss，并且配置
postcss.config.js的配置文件即可；
// 安装postcss以及它依赖的插件
npm install postcss postcss-preset-env -D
postcss.config.js文件：
执行npx vite运行项目，可以发现没问题。
Vite对TypeScript的支持
Vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译。
如果我们查看浏览器中的请求，会发现请求的依然是ts的代码，这是因为Vite中的服务器Connect会对我们的请求进行转发，获取ts编译后的代码，然后返回给浏览器，浏览器就可以直接进行解析了。
注意：在Vite2中，已经不再使用Koa了，而是使用Connect来搭建服务器。
执行npx vite运行项目，可以发现没问题。
Vite对Vue的支持
Vite对Vue提供第一优先级支持：
如果想支持Vue 3 单文件，需安装@vitejs/plugin-vue插件，
如果想支持Vue 3 JSX 支持，需安装vitejs/plugin-vue-jsx插件，
如果想支持Vue 2，需安装underfin/vite-plugin-vue2插件。
安装支持Vue3的插件：
npm install @vitejs/plugin-vue -D
安装上面插件依赖的插件：
npm install @vue/compiler-sfc -D
新建vite.config.js文件，配置插件：
const vue = require('@vitejs/plugin-vue')
module.exports = {
plugins: [
vue()
]
}
执行npx vite运行项目，可以发现没问题。
Vite打包项目
我们可以直接通过vite build来完成对当前项目的打包：
npx vite build
打包后会生成dist文件夹：
我们可以通过preview的方式，开启一个本地服务来预览打包后的效果：
npx vite preview
但是实际项目中我们也会使用脚本，不用上面的命令，如下：
"scripts": {
"serve": "vite",
"build": "vite build",
"preview": "vite preview"
}
这样我们执行 npm run serve，npm run build，npm run preview 就可以了。
ESBuild的特点
Vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译，Vite打包非常快的一个原因就是它是用ESBuild来编译的。
ESBuild的特点：
- 超快的构建速度，并且不需要缓存；
- 支持ES6和CommonJS的模块化；
- 支持ES6的Tree Shaking；
- 支持Go、JavaScript的API；
- 支持TypeScript、JSX等语法编译；
- 支持SourceMap；
- 支持代码压缩；
- 支持扩展其他插件；
ESBuild的构建速度
ESBuild的构建速度和其他构建工具速度对比：
ESBuild为什么这么快呢？
- 使用Go语言编写的，可以直接转换成机器代码，而无需经过字节码；
- ESBuild可以充分利用CPU的多内核，尽可能让它们饱和运行；
- ESBuild的所有内容都是从零开始编写的，而不是使用第三方，所以从一开始就可以考虑各种性能问题；
- 等等....
Vite脚手架工具
在开发中，我们不可能所有的项目都使用Vite从零去搭建，比如 一个react项目、Vue项目，这个时候Vite还给我们提供了对应的脚手架工具。
所以Vite实际上是有两个工具的：
- vite：相当于是一个构件工具，类似于webpack、rollup；
- @vitejs/create-app：类似vue-cli、create-react-app；
如何使用脚手架工具呢？
npm init @vitejs/app
上面的做法相当于省略了安装脚手架的过程，我们推荐一步一步来，如下：
//先安装脚手架
npm install @vitejs/create-app -g
//再创建项目
create-app 项目名字