Question

我们以使用 @vue/cli 新建一个 vue 项目为例，首先要全局安装 @vue/cli：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

然后创建一个项目：

vue create vue-test-app

接下来，我们思考一些问题 (以 npm 作为包管理器)。

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

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

输入命令 vue create vue-test-app 发生了什么？

为什么 vue 指向一个 js 文件，我们却可以直接通过 vue 命令直接去执行它？

• @vue/cli 是一个 npm 项目，包含一个 bin/vue.js 文件并已经发布到 npm
• 执行安装命令，npm 会从 npm 注册表中下载 @vue/cli 的最新版本及其依赖项
• 命令行工具会把 @vue/cli 安装到 node 的 lib/node_modules
• 在环境变量中注册 vue 命令，并配置软链接指向：lib/node_modules/@vue/cli/bin/vue.js
• 在终端输入 vue create vue-test-app，终端解析出 vue 命令
• 终端在环境变量中找到 vue 命令，根据 vue 命令指向的软链接找到实际文件 vue.js
• 终端利用 node 执行 vue.js，解析 command/options，执行 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 进行执行。