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

脚手架简介

脚手架本质是一个操作系统的客户端，他通过命令执行，比如：
vue create vue-test-app
上边这条命令由3部分组成：

• 主命令：vue
• command： create
• command的param：vue-test-app

它表示创建一个vue项目，项目的名称为vue-test-app，以上是一个较为简单的脚手架命令，但实际场景往往更加复杂，比如：
当前目录已经有了文件了，我们需要覆盖当前目录下的文件，强行进行安装vue项目，此事我们可以输入
vue create vue-test-app --force
这里的--force叫做option，用来辅助脚手架确认在特定的场景下用户的选择（可以理解为配置），还有一种场景：
通过vue create创建项目时，会自动执行 npm install帮用户安装依赖，如果我们希望淘宝源来安装，可以输入命令：

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

这里的-r也叫option，他与--force不同的是他使用-,并且使用的简写，这里的-r 也可以替换成 --registry，有的同学可能要问，我这里为啥知道这个命令，其实我们输入下面的命令就可以看到vue create支持的所有的options:
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-app等待终端的反馈
  
  为什么终端会给我们这样的反馈呢

  • 首先终端中输入vue这个指令后，先在环境变量中找到vue这个指令，在环境变量中找到这个方法是which vue
    
    
    在这个终端下有vue这个命令的，所以在bin目录下有vue这个命令，所以在输入vue时候就执行的node下的bin下的vue命令
  • 而这里的vue又是个超链接
    lrwxr-xr-x 1 cjjxw staff 39B Apr 6 10:27 vue -> ../lib/node_modules/@vue/cli/bin/vue.js
    指向到这里，我们在node的bin下面的node_modules这里是全局依赖，这里的依赖是指npm i -g XXX所有的全局包都会放在这里
  • 我们在使用vue命令之所以能使用，就是因为npm i -g @vue/cli
  • 那么我们找到这个@vue的包,实际最终的vue指令指向这里 /Users/cuijianjun/.nvm/versions/node/v14.6.0/lib/node_modules/@vue/cli/bin/vue.js

  总结一下脚手架执行的原理

• 在终端输入vue create vue-test-app
• 终端解析出vue命令
• 终端在环境变量中找到vue命令
• 终端根据vue命令链接到实际文件vue.js
• 终端利用node执行vue.js
• vue.js解析command/options
• vue.js执行command

• 执行完毕，退出执行

  从应用角度看如何开发一个脚手架

  这里以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进行执行

  讲到这里 大家会有这么几个疑问

• 为什么全局安装@vue/cli后会添加的命令为vue?
• 全局安装@vue/cli时发生了什么？
• 为什么vue指向一个js文件，我们却可以直接通过vue命令直接去执行它呢