1. VueCLI

1.1 Vue CLI脚手架

什么是Vue脚手架？

• 我们前面学习了如何通过webpack配置Vue的开发环境，但是在真实开发中我们不可能每一个项目从头来完成所有的webpack配置，这样显示开发的效率会大大的降低；
• 所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue的项目我们使用的就是Vue的脚手架；
• 脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架。

Vue的脚手架就是Vue CLI：

• CLI是Command-Line Interface, 翻译为命令行界面；
• 我们可以通过CLI选择项目的配置和创建出我们的项目；
• Vue CLI已经内置了webpack相关的配置，我们不需要从零来配置。

  1.2  Vue CLI 安装和使用

• 安装最新版本的Vue CLI。当我们进行全局安装时，安装后的Vue CLI在任何时候都可以通过vue的命令来创建项目；

npm install @vue/cli -g

• 升级Vue CLI。 如果是比较旧的版本，可以通过下面的命令来升级；

npm update @vue/cli -g

• 通过Vue的命令来创建项目。

vue create 项目的名称

1.3 vue create 项目的过程

1.4 项目的目录结构

 1.5 Vue CLI的运行原理

 2. vite

 2.1 认识vite

• Webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具：比如rollup、parcel、gulp、vite等等 。
• 什么是vite呢？官方的定位：下一代前端开发与构建工具；
• 如何定义下一代开发和构建工具呢？ 我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如ES6、TypeScript、Vue文件等等； 所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有webpack、rollup、parcel。

2.2 Vite的构造

它主要由两部分组成：

• 一个开发服务器，它基于原生ES模块提供了丰富的内建功能，HMR的速度非常快速；
• 一套构建指令，它使用rollup打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源。

• 我个人非常看好vite的未来，也希望它可以有更好的发展；
• 但是，目前vite虽然已经更新到2.0，依然并不算非常的稳定，并且比较少大型项目（或框架）使用vite来进行构建；
• vite的整个社区插件等支持也还不够完善；
• 包括vue脚手架本身，目前也还没有打算迁移到vite，而依然使用webpack（虽然后期一定是有这个打算的）；

2.3 浏览器原生支持模块化

npm install vite –g # 全局安装
npm install vite –D # 局部安装

npx vite

2.5 Vite对css的支持

vite可以直接支持css的处理：直接导入css即可；

• 直接导入less；
• 之后安装less编译器；

npm install less -D

vite直接支持postcss的转换：

• 只需要安装postcss，并且配置 postcss.config.js 的配置文件即可；

npm install postcss postcss-preset-env -D

2.6 Vite对TypeScript的支持

vite对TypeScript是原生支持的，它会直接使用ESBuild来完成编译：

• 只需要直接导入即可；

• 这是因为vite中的服务器Connect会对我们的请求进行转发；
• 获取ts编译后的代码，给浏览器返回，浏览器可以直接进行解析；

注意：在vite2中，已经不再使用Koa了，而是使用Connect来搭建的服务器

2.6 Vite对vue的支持

vite对vue提供第一优先级支持：

• Vue 3 单文件组件支持：@vitejs/plugin-vue
• Vue 3 JSX 支持：@vitejs/plugin-vue-jsx
• Vue 2 支持：underfin/vite-plugin-vue2

安装支持vue的插件：

npm install @vitejs/plugin-vue -D

在vite.config.js中配置插件：

2.7 Vite打包项目

我们可以直接通过vite build来完成对当前项目的打包工具：

npx vite build

我们可以通过preview的方式，开启一个本地服务来预览打包后的效果：

npx vite preview

2.8 ESBuild解析

ESBuild的特点：

• 超快的构建速度，并且不需要缓存；
• 支持ES6和CommonJS的模块化；
• 支持ES6的Tree Shaking；
• 支持Go、JavaScript的API；
• 支持TypeScript、JSX等语法编译；
• 支持SourceMap；
• 支持代码压缩；
• 支持扩展其他插件；

2.9 ESBuild的构建速度

ESBuild为什么这么快呢？

• 使用Go语言编写的，可以直接转换成机器代码，而无需经过字节码；
• ESBuild可以充分利用CPU的多内核，尽可能让它们饱和运行；
• ESBuild的所有内容都是从零开始编写的，而不是使用第三方，所以从一开始就可以考虑各种性能问题；
• 等等....

2.10 Vite脚手架工具

在开发中，我们不可能所有的项目都使用vite从零去搭建，比如一个react项目、Vue项目；这个时候vite还给我们提供了对应的脚手架工具；

• vite：相当于是一个构件工具，类似于webpack、rollup；
• @vitejs/create-app：类似vue-cli、create-react-app；

npm init @vitejs/app

npm install @vitejs/create-app -g
create-app