Hello,又见面了,我是渔戈!

今天我们来讲讲 VueCLI 和 Vite!

1.Vue CLI 脚手架

什么是 Vue 脚手架？

• 在真实开发中我们不可能每一个项目从头来完成所有的 webpack 配置，这样显示开发的效率会大大的降低；

• 所以在真实开发中，我们通常会使用脚手架来创建一个项目，Vue 的项目我们使用的就是 Vue 的脚手架；

• 脚手架其实是建筑工程中的一个概念，在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架；

Vue 的脚手架就是 Vue CLI：

• CLI 是 Command-Line Interface, 翻译为命令行界面；

• 我们可以通过 CLI 选择项目的配置和创建出我们的项目；

• Vue CLI 已经内置了 webpack 相关的配置，我们不需要从零来配置

1.1Vue CLI 安装和使用

安装 Vue CLI:

• 我们是进行全局安装，这样在任何时候都可以通过 vue 的命令来创建项目:npm install @vue/cli -g
  

升级 Vue CLI：

• 如果是比较旧的版本，可以通过下面的命令来升级:npm update @vue/cli -g
  

通过 Vue 的命令来创建项目:vue create 项目的名称

1.2vue create 项目的过程

1.3 项目的目录结构

1.4Vue CLI 的运行原理

2.认识 Vite

• Webpack 是目前整个前端使用最多的构建工具，但是除了 webpack 之后也有其他的一些构建工具：比如 rollup、parcel、gulp、vite 等等

• 什么是 vite 呢？ 官方的定位：下一代前端开发与构建工具

如何定义下一代开发和构建工具呢？

• 我们知道在实际开发中，我们编写的代码往往是不能被浏览器直接识别的，比如 ES6、TypeScript、Vue 文件等

• 所以我们必须通过构建工具来对代码进行转换、编译，类似的工具有 webpack、rollup、parcel

• 但是随着项目越来越大，需要处理的 JavaScript 呈指数级增长，模块越来越多

• 构建工具需要很长的时间才能开启服务器，HMR 也需要几秒钟才能在浏览器反应出来

• 所以也有这样的说法：天下苦 webpack 久矣

Vite (法语意为 "快速的"，发音 /vit/) 是一种新型前端构建工具，能够显著提升前端开发体验。

2.1Vite 的构造

它主要由两部分组成：

• 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，HMR 的速度非常快速；

• 一套构建指令，它使用 rollup 打开我们的代码，并且它是预配置的，可以输出生成环境的优化过的静态资源

目前是否要大力学习 vite？vite 的未来是怎么样的？

• 我个人非常看好 vite 的未来，也希望它可以有更好的发展；

• 但是，目前 vite 虽然已经更新到 2.0，依然并不算非常的稳定，并且比较少大型项目（或框架）使用 vite 来进行构建

• vite 的整个社区插件等支持也还不够完善；

• 包括 vue 脚手架本身，目前也还没有打算迁移到 vite，而依然使用 webpack（虽然后期一定是有这个打算的）

• 所以 vite 看起来非常的火热，在面试也可能会问到，但是实际项目中应用的还比较少；

2.2 浏览器原生支持模块化

但是如果我们不借助于其他工具，直接使用 ES Module 来开发有什么问题呢？

• 首先，我们会发现在使用 loadash 时，加载了上百个模块的 js 代码，对于浏览器发送请求是巨大的消耗

• 其次，我们的代码中如果有 TypeScript、less、vue 等代码时，浏览器并不能直接识别

事实上，vite 就帮助我们解决了上面的所有问题。

2.3Vite 的安装和使用

注意：Vite 本身也是依赖 Node 的，所以也需要安装好 Node 环境,并且 Vite 要求 Node 版本是大于 12 版本的；

首先，我们安装一下 vite 工具:

通过 vite 来启动项目：npx vite

2.4Vite 对 css 的支持

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

vite 可以直接支持 css 预处理器，比如 less:

• 直接导入 less；

• 之后安装 less 编译器；npm install less -D
  

vite 直接支持 postcss 的转换：

• 只需要安装 postcss，并且配置 postcss.config.js 的配置文件即可:npm install postcss postcss-preset-env -D
  

2.5Vite 对 TypeScript 的支持

vite 对 TypeScript 是原生支持的，它会直接使用 ESBuild 来完成编译：只需要直接导入即可；

如果我们查看浏览器中的请求，会发现请求的依然是 ts 的代码：

• 这是因为 vite 中的服务器 Connect 会对我们的请求进行转发；

• 获取 ts 编译后的代码，给浏览器返回，浏览器可以直接进行解析；

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

2.6Vite 对 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.7Vite 打包项目

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

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

3.ESBuild 解析

ESBuild 的特点：

• 超快的构建速度，并且不需要缓存；

• 支持 ES6 和 CommonJS 的模块化；

• 支持 ES6 的 Tree Shaking；

• 支持 Go、JavaScript 的 API；

• 支持 TypeScript、JSX 等语法编译；

• 支持 SourceMap；

• 支持代码压缩；

• 支持扩展其他插件;

3.1ESBuild 的构建速度

ESBuild 的构建速度和其他构建工具速度对比：

ESBuild 为什么这么快呢？

• 使用 Go 语言编写的，可以直接转换成机器代码，而无需经过字节码；

• ESBuild 可以充分利用 CPU 的多内核，尽可能让它们饱和运行；

• ESBuild 的所有内容都是从零开始编写的，而不是使用第三方，所以从一开始就可以考虑各种性能问题

4.Vite 脚手架工具

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

所以 Vite 实际上是有两个工具的：

• vite：相当于是一个构件工具，类似于 webpack、rollup；

• @vitejs/create-app：类似 vue-cli、create-react-app；

如果使用脚手架工具呢？npm init @vitejs/app

上面的做法相当于省略了安装脚手架的过程：

相关文章:

深入浅出来谈谈webpack🔥

你真的了解过Vue的组件化开发吗🔥

原来Vue3的computed属性还能这么用啊🔥

邂逅Vue3

Vue3的基本指令

Vue3:认识侦听器watch🔥

你真的了解v-model吗🔥