从使用角度理解什么是脚手架？

脚手架在我们创建目录时经常用到过，但却很少探究它的原理，本篇文章呢就和大家一起来探究脚手架的原理，执行命令的背后到底做了什么事。

脚手架的简介

举一个例子🌰，我们创建项目时经常用到的一个命令；

js 复制代码

vue create vue-test

上面这条命令由3部分组成：

它表示创建一个vue的项目，这个项目的名称是vue-test，这是一个简单的脚手架命令，还有更加复杂的场景；比如说：当前的目录下已经有文件了，我们需要覆盖掉当前目录的文件，强制进行安装vue的项目，此时我们可以用：

js 复制代码

vue create vue-test --force

这里的--force叫做option，用来辅助脚手架确定在特定场景下用户的选择（可以理解为配置），还有一种场景：

通过vue create创建项目时，会自动执行npm install帮用户安装以来，如果我们希望用淘宝源来安装可以使用如下命令：

js 复制代码

vue create vue-test --force -r https://registry.npm.taobao.org

上面的-r也叫做option，这里的-r也可以替换成--registry;有这么多的命令，我们怎么知道怎么用呢？这时我们就可以用到下面这个命令，输入这个命令就可以看到vue create支持的所有的options;

js 复制代码

vue create --help

-r https://registry.npm.taobao.org后面的https://registry.npm.taobao.org成为option的param，其实--force也可以理解为--force true，简写成：--force或者-f;

我们在终端输入vue create vue-test命令时，它到底是怎么处理的呢？

1.输入vue create vue-test命令；

2.终端会在环境变量中找到vue指令；

如何在环境变量中找到vue指令呢？

在终端中输入which vue，我们可以看到node安装目录下的bin目录下的vue这个命令；

我们可以进入node的目录看一下cd /Users/Minjie/.nvm/versions/node/v19.9.0/，在node目录下它是有如下一些文件夹：

这里我们重点看的是bin和lib目录，它们和脚手架的执行原理有关；在这个bin的目录下面，有一个vue的命令；

我们直接输入vue，其实执行的是node下bin目录下的vue； 这里的vue是一个超链接，我看一下它指向了哪里；首先进入lib/node_modules目录；我们通过npm -g安装的包都会放到这个目录来；在这里可以查询出我们所有全局安装的包；

接着我们进入@vue/cli目录下，我们可以看到vue-cli的源码，它有一个bin目录，bin目录下有一个vue.js，上文所讲的vue超链接就是指向这里的vue.js：

它的过程可参考下图，vue超链接实际执行的是lib/node_modules下的vue.js文件：

脚手架执行的原理如下：

这里以vue-cli为例：

开发npm项目，该项目中应包含一个bin/vue.js文件，并将这个项目发布到npm；
将npm项目安装到node的lib/node_modules；
在node的bin目录下配置的vue的软链接指向lib/node_modules/@vue/cli/bin/vue.js；
这样我们在执行vue命令时就可以找到vue.js执行；