VueCLI × Vite | 😈Zabanya’s Blog

一、Vue CLI脚手架

（一）简介

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

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

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

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

（二）相关操作

全局安装：npm install @vue/cli -g

升级Vue CLI：npm update @vue/cli -g

通过Vue的命令来创建项目：vue create projectName

手动创建项目时备注：

Progressive Web App（PWA）Support：该选项是渐进式Web开发，用于缓存

（三）Vue CLI原理

1. 命令运行实现

从 package.json 中的 scripts 中的命令 serve 或 build 中我们可以看到如下vue-cli-service

该命令对应 node_modules 中的 .bin 中的 vue-cli-service，该文件中可见

根据蓝色框中的路径我们可以找到 vue-cli-serve.js，从该代码中从 Service.js 中主要执行两个关键步骤，1️⃣ Service constructor，2️⃣ run方法。

其中，run方法中name参数是命令，即serve / build；然后通过 let command = this.commands[name] 获取命令相关代码。然后通过 const { fn } = command 解构 command对象里面的fn函数，并执行。

⭐ command对象详解

实际上，一开始command对象是空的，但是会从构造器中调用 resolvePlugins 方法

此外，在 run 函数中有一行初始化代码，用于加载环境变量

以serve命令为例，我们在./build下可以看到文件 serve.js。

而且PluginAPI源自于PluginAPI.js，且其中包含registerCommand函数，其设置如下图所示

回到Service.js中的run函数，在该函数最后代码，fn实际上即所选命令所对应的函数，见上图 async function serve(args)

2. Vue CLI实现Webpack配置

大致流程如下

resolveWebpackConfig 来源于 PluginAPI.js，而 PluginAPI.js 又源自于 Service.js。

个人配置部分

此外，由以下代码可以得知，我们可以从项目根目录新建vue.config.js

其他部分配置

二、Vite

注意：Vite本身也是依赖Node的，所以也需要安装好Node环境，并且Vite要求Node版本是大于12版本。其通常用于创建本地服务器Connect，并把代码转化为ES6的js代码。

结构

它主要由两部分组成：

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

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

相比于Webpack而言，Vite构建速度快(使用ESBuild)、性能更高，部分功能已经自动实现例如路径自动修正、TS，但是CSS处理中less等仍需要安装 postCss。

（一）CSS配置

npm install postcss postcss-preset-env -D

（二）Vue配置

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

Vue 3 单文件组件支持：@vitejs/plugin-vue

Vue 3 JSX 支持：@vitejs/plugin-vue-jsx

Vue 2 支持：underfin/vite-plugin-vue2

配置如下：

（三）Vite相关配置

1. vite预打包

当第一次执行npx vite命令时，在node_module文件夹下，.vite文件夹中会对部分依赖文件进行预打包，提高运行性能。

2. vite打包

npx vite build

3. vite预览

npx vite review

4. 命令行优化

（四）vite脚手架

安装命令如下键入：

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

也可以将两步合成一步，但是不建议 npm init @vitejs/app