1. 从使用角度理解脚手架

简介

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

1. 主命令: vue
2. command: create
3. command 的 param: vue-test-app

可以在指令后添加配置项

如果当前目录已经有文件了，还需要覆盖当前目录下的文件，强制进行安装 vue 项目，可以执行：vue create vue-test-app --force
这里的 --force 叫做 option，用来辅助脚手架确认在特定场景下用户的选择（可以理解为配置）。

使用淘宝源来安装镜像

vue create vue-test-app --force -r https://registry.npm.taobao.org
-r 也是 option，它与 --force 不同的是它使用 -，并且使用简写，这里的 -r 也可以替换成 --registry。
-r https://registry.npm.taobao.org 后面的 registry.npm.taobao.org 成为 option 的 param，--force 可以理解为：--force true，简写为：--force 或 -f。

查看 vue create 支持的所有 options

vue create --help

脚手架执行过程

1. 在终端输入 vue create vue-test-app
2. 终端在 环境变量 中找到 vue 命令（本质是使用 which vue 指令来查找的）。

// 终端窗口
user$ which vue
/Users/.nvm/versions/node/v12.11.1/bin/vue

3. 终端根据 vue 命令链接到实际文件 vue.js（lrwxr 中的 l 表示软链接）

lrwxr-xr-x 1 sam staff 39 3 21 2020 vue@ -> ../lib/node_modules/@vue/cli/bin/vue.js

Tips: 通过 npm -g 下载的依赖，都在 node/v12.11.1/lib/node_modules 文件夹下

4. 终端利用 node 执行 vue.js
5. vue.js 解析 command /options
6. vue.js 执行 command
7. 执行完毕，退出执行

为什么全局安装 @vue/cli 后会添加的命令为 vue？

• vue 是软连接的名称
• bin/vue.js 指向的实际文件

全局安装 @vue/cli 时发生了什么？

npm install -g @vue/cli

1. 把 @vue/cli 下载到 node/v12.11.1/lib/node_modules 目录中。
2. 解析 package.json 中 bin 的配置，在 bin 配置的指令和实际执行的 JS 之间建立软连接。

为什么执行 vue 命令时可以执行 js 文件？

// vue.js 源码
#!/usr/bin/env node //提示操作系统在环境变量中找 node 去执行当前文件

脚手架开发流程

• 创建 npm 项目
• 创建脚手架入口文件，最上方添加： #!/usr/bin/env node(提示操作系统在环境变量中找 node)
• 配置 package.json，添加 bin 属性(指定脚手架名称、入口文件地址)
• 编写脚手架代码
• 将脚手架发布到 npm

脚手架使用流程

• 安装脚手架 npm install -g your-own-cli
• 使用脚手架 your-own-cli

脚手架开发难点解析

• 分包：将复杂的系统拆分成若干个模块
• 命令注册：vue create vue add vue invoke
• 参数解析：vue command [options] <params>
  • options 全称：--version、--help
  • options 简写：-v、-h
  • 带 params 的 options：--path /Users/sam/Desktop/vue-test
• 帮助文档：
  • global help(主命令的用法)
    • Usage
    • Options
    • Commands
      示例：vue 的帮助信息：

Usage: vue <command> [options]

Options:
  -V, --version  output the version number
  -h, --help     output usage information

Commands:
  create [options] <app-name>                                 create a new project powered by vue-cli-service
  add [options] <plugin> [pluginOptions]                      install a plugin and invoke its generator in an already created project
  invoke [options] <plugin> [pluginOptions]                   invoke the generator of a plugin in an already created project
  inspect [options] [paths...]                                inspect the webpack config in a project with vue-cli-service
  serve [options] [entry]                                     serve a .js or .vue file in development

• command help（子命令的用法）
  • Usage
  • Options
    示例：vue create 的帮助信息：

Usage: create [options] <app-name>

create a new project powered by vue-cli-service

Options:
  -p, --preset <presetName>       Skip prompts and use saved or remote preset
  -d, --default                   Skip prompts and use default preset
  -i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset
  -m, --packageManager <command>  Use specified npm client when installing dependencies
  -r, --registry <url>            Use specified npm registry when installing
dependencies (only for npm)
  -g, --git [message]             Force git initialization with initial commit message
  -n, --no-git                    Skip git initialization
  -f, --force                     Overwrite target directory if it exists