理解 @Vue/cli 脚手架执行原理

理解 @Vue/cli 脚手架执行原理

进行安装

npm install -g @vue/cli

安装完成后可以全局调用

vue --version

脚手架本质类似于一个系统的终端，例如 cmd，可以通过命令进行执行，如

vue create vue-demo 

上述命令由三个部分组成

1. 主命令：vue

2. 执行命令：create

3. 命令参数：vue-demo

脚手架的执行原理

1. 在终端输入vue create vue-demo

2. 终端解析出 vue 命令

3. 终端在环境变量中找到 vue 命令

4. 终端根据 vue 命令找到实际文件 vue.js

   在 Liunx 可以直接通过 which vue 查找 vue 的所在位置，对应 node 的 bin 目录下的 vue 命令,
   它是一个软链接，实际指向 node 下面的 lib/node_modules（node 全局依赖）下面的 @vue\cli\bin\vue.js，

   而window 在 C:\Users\用户名\AppData\Roaming\npm 文件夹内对应的脚本文件，
   会指向 C:\Users\用户名\AppData\Roaming\npm\node_modules@vue\cli\bin\vue.js

5. 终端利用 node 执行 vue.js

6. vue.js 解析命令

7. vue,js 执行命令

8. 执行完毕，退出执行

为什么全局安装 @vue/cli 后会全局添加一个 vue 命令, 而不是 @vue/cli

来到 vue.js 的目录下，找出 package.json 可以看到其内部有

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

通过这个配置，将 vue 指向 vue.js 在全局安装的时候会通过这个配置生成 软链接 / 执行脚本

执行 vue.js 为何是直接使用 vue 而不是 node vue.js

回到 vue.js 里面 会在第一行 看到 #!/usr/bin/env node

Liunx 在执行的时候会先在环境中找到 node 再执行文件

./vue.js会等价于 /usr/bin/env node vue.js 等价于 node vue,js

使用 #!/usr/bin/node 直接执行 usr/bin/目录下的 node 也是有效的，但是固定了 node 的位置，可能存在问题，应该直接从环境中获取