（一）脚手架开发--原理篇

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

npm i -g @vue/cli

首先，使用which vue查看下vue的实际文件路径

// 查看文件路径
xiaohu@xiaohudeMacBook-Pro / % which vue

/Users/xiaohu/.nvm/versions/node/v18.12.1/bin/vue

// 进入bin目录,该目录是node下面的可执行文件，可执行文件都会在这里

xiaohu@xiaohudeMacBook-Pro / % cd /Users/xiaohu/.nvm/versions/node/v18.12.1/bin

xiaohu@xiaohudeMacBook-Pro bin % ls -alF
total 161800
lrwxr-xr-x   1 xiaohu  staff        39  8 15  2023 vue@ -> ../lib/node_modules/@vue/cli/bin/vue.js

可以看出vue命令实际上是一个软链接，它链接到../lib/node_modules/@vue/cli/bin/vue.js这个文件,所以控制台执行vue命令，实际执行的是这个vue.js文件

那么，执行vue命令就绑定到vue.js文件这样的关系是在哪里指定的呢？

xiaohu@xiaohudeMacBook-Pro cli % pwd 

/Users/xiaohu/.nvm/versions/node/v18.12.1/lib/node_modules/@vue/cli

xiaohu@xiaohudeMacBook-Pro cli % ls

LICENSE bin node_modules types

README.md lib package.json
// 查看package.json
xiaohu@xiaohudeMacBook-Pro cli % cat package.json

查看package.json文件如下

{
  "name": "@vue/cli",

  "version": "5.0.8",

  "description": "Command line interface for rapid Vue.js development",

  "bin": {
    "vue": "bin/vue.js"
  },

  "types": "types/index.d.ts",

  "author": "Evan You",

  "license": "MIT"
}

这个bin配置的就是在操作系统安装完@vue/cli后软连接的名称以及指向的执行文件路径

• 执行vue命令的时候发生了什么？

  • 在环境变量中找到vue命令有没有被注册
  • 执行../lib/node_modules/@vue/cli/bin/vue.js这个文件

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

  新建一个test.js文件

  授权test的可执行权限chmod 777 test.js

console.log('bbb');

xiaohu@xiaohudeMacBook-Pro code % chmod 777 test.js

xiaohu@xiaohudeMacBook-Pro code % ./test.js        

./test.js: line 1: syntax error near unexpected token `'bbb''

./test.js: line 1: `console.log('bbb');'

xiaohu@xiaohudeMacBook-Pro code %

可以看到文件仍然没有被执行，因为js文件需要node解释器去执行

在test.js文件首行添加#!/usr/bin/env node

#!/usr/bin/env node
console.log('bbb');

这句话就是告诉控制台在执行test.js文件的时候，在环境变量中去寻找node这个命令，再使用node执行这个文件,所以 ./test.js node test.js /usr/bin/env node test.js这三个命令是等价的

xiaohu@xiaohudeMacBook-Pro code % ./test.js

bbb
xiaohu@xiaohudeMacBook-Pro code % node test.js

bbb

xiaohu@xiaohudeMacBook-Pro code % /usr/bin/env node test.js

bbb