前端架构: 从vue-cli探究脚手架原理

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

• 脚手架本质是一个操作系统的客户端
  • 在终端中去执行一个命令，这个命令本身它就是一个客户端
  • 我们其实可以把脚手架理解为操作系统的一个客户端
  • 通过命令去执行它的时候，这个命令往往是这样的一个构造，如下
• 比如：要创建一个vue的项目的时候, $ vue create vue-test-app
  • 上面这条命令由3个部分组成
    • 主命令: vue
    • command: create
      • 这个 command 是子命令，实际上它向脚手架(主命令)发送一个请求
      • 这个请求，让我们的脚手架帮我们完成一个动作，完成这个动作，就是create创建项目
    • command的param: vue-test-app
      • 建什么项目呢？看这第三个参数，在command后面，又加了一个空格，输入了一个参数
  • 这个命令输入完以后，脚手架会给我们一定的反馈, 比如说会让我们做一些选择，或者会帮我们执行一些操作等等
  • 它表示创建一个vue项目，项目名称为 vue-test-app
• 以上是一个较为简单的脚手架命令，但实际场景往往更复杂，比如:
  • 当前目录已经有文件了，我们需要覆盖当前目录下的文件，强制进行安装 vue 项目，此时我们就可以输入
  • $ vue create vue-test-app --force
    • --force 叫做 option, 用来辅助脚手架确认在特定场景下用户的选择(可以理解为配置)
    • 如果加入了 --force，就等于告诉脚手架创建项目的时候，可以强制进行覆盖
    • 如果没加 --force, 那么脚手架的执行就会中断。因为你没有强制覆盖，而我当前又有文件，所以我就会中断
    • 其实 --force 可以理解为 --force true, 简写为：--force 或 -f
• 还有一种场景, 通过 vue create 创建项目时，会自动执行 npm install 帮用户安装依赖
  • 如果我们使用淘宝源来安装，就可以输入命令 vue create vue-test-app --force -r https://registry.npm.taobao.org
  • 这里的