脚手架命令解析 Vue cli为例
命令：vue create vue3-project -r xxxxx.com
在这个命令中包含五个部分：
主命令vue
命令create 命令create的参数 vue3-project
选项 -r 选项-r的参数 http://xxxxx.com
…
全局命令创建流程
假设我们通过 npm install -g @vue/cli ，这时我们在当前node环境中安装了一个全局的vue-cli的脚手架创建命令
我们在通过vue create xxx的过程中的执行流程如下：
- 终端中执行vue create xxx命令
- 终端解析出vue命令，vue命令软连接到当前node下的@vue文件中bin目录下的vue.js。在终端中解析出
vue命令，并将其软连接到当前项目node_modules下的@vue/cli文件夹中的bin目录下的vue.js文件，通常是在全局安装了 Vue CLI 的情况下发生的。 - 终端根据vue命令链接到实际的vue.js文件
- 终端利用node执行vue.js文件
- vue.js文件解析command/options
- vue.js执行command
- 执行完毕，退出程序
问题
-
为什么全局安装的@vue/cli 后添加的命令是vue？
答：在全局安装的@vue/cli，在其项目工程中的package.json中设置的bin 命令是vue，通过vue命令链接到vue.js文件地址。
npm根据package.json中的bin字段将vue命令链接到全局可执行路径中。 -
全局安装@vue/cli时发生了什么？
答：首先从npm源中下载@vue/cli到当前全局的node目录的node_modules下，然后根据@vue/cli中的package.json中的bin字段，将vue命令链接到全局可访问的vue.js文件上。
-
执行vue命令时发生了什么？为什么vue指向一个js文件，我们却可以直接通过vue命令去执行它？
答：npm在安装@vue/cli 将vue链接到了系统的PATH环境变量中的某个路径，所以我们使用vue命令时不会出现找不到改命令。在vue命令链接的那个js文件中，npm会默认加上一行shebang（#!），例如：
#!/usr/bin/env node，告诉操作系统执行的时候使用node来执行该文件。
