常规 ​

正常来说我们运行脚手架一般都是这样：

npm install -g @vue/cli

vue create hello-world

安装在全局,然后利用脚手架中的指定 bin 字段运行具体脚本。

目前的方案 ​

npm create vue@latest

npm init vue@latest

npx create-wujie@latest

运行后就会下载这个包进入交互式命令行，然后根据交互式命令行进行操作。跟传统步骤好像不一样。

在原来可能会考虑说脚手架是更新了,但是本地还是旧版本

但是现在都是增加 @latest 字段,这样就可以保证每次使用都是最新版本。

原理 ​

npm exec ​

npm x ​

npm 官方文档中指出 x，其实就是 exec 的别名，通俗来讲意思就是 npm exec、npm x ，两个命令是完全等价的。

npm exec <pkg>的执行流程 - 在本地查找是否有<pkg>对应的npm包 - 若找到，则运行这个包的package.json中bin字段对应的可执行文件 - 若未找到，在远程npm仓库查找是否有<pkg>对应的 npm 包 - 若找到，则提示是否下载到本地 - 下载完成后，再运行这个包package.json中bin字段对应的可执行文件

同时，在执行bin字段有几点注意的 - 如果bin只有一个入口，那么可以执行 - 如果bin有多个入口，则寻找和包名一样的那个入口 - 如果没找到，则npm exec <pkg>报错。

举个栗子 🌰

// 这是package.json中的字段，简单列举，省略很多
{
    "name": "create-vue"
    "bin": {
        "create-vue": "index.js",
        "cva": "index.js"
    }
    ...
}

执行npm exec crate-vue这条命令后 - 首先本地查找是否有create-vue这个npm包 - 找到，则运行create-vue这个npm包中的package.json中bin字段对应的可执行文件，即index.js这个文件 - 若未找到，在远程 npm 仓库查找是否有create-vue这个包 - 若找到，则提示是否下载到本地 - 下载完成后，再运行这个包package.json中bin字段对应的可执行文件，即index.js这个文件

看了bin字段的内容，我们不妨在执行一下npm exec cva这条命令，执行流程和上面的npm exec crate-vue也是一样的

那么我们来分析一下：执行npm exec cva这条命令后 - 首先本地查找是否有cva这个 npm 包 - 找到，则运行cva这个npm包中的package.json中bin字段对应的可执行文件 - 若未找到，在远程npm仓库查找是否有cva这个包 - 若找到，则提示是否下载到本地 - 下载完成后，再运行这个包package.json中bin字段对应的可执行文件

这样我们应该就明白了，执行npm exec cva这条命令后，我们其实是需要执行cva这个包中package.json文件中的bin字段，而不是create-vue这个包中的package.json文件中的bin字段。

但是执行后我们会发现，这个命令报错了，那么为什么呢？

因为 npm 包源中刚好含有这个包，但是没有bin字段，所以报错了。

npx ​

可以简单理解成 npx就是npm exec的快捷方式，执行npx <pkg>命令，就是执行npm exec <pkg>命令。

npm exec create-vue
# 等同于
npx create-vue

npm init ​

npm create ​

npm innit ​

npm 官方文档中指出 create，innit 其实就是 init 的别名，通俗来讲意思就是，其实 npm init，npm create，npm innit 三个命令是完全等价的。

npm init/ npm create/ npm innit

这种后面没有<initializer>是用来创建 package.json 文件的

npm init <initializer>/ npm create <initializer>/ npm innit <initializer>

这里的 npm init <initializer>实际会调用 npm exec create-<initializer>, 也相当于 npx create-<initializer>。 我们可以把这个<initializer>理解为 有特殊格式包名的包 的简称，它真正的包名为 create-<initializer>，也只有符合这种特殊格式(create-<xxxx>)的包才可以执行这样的命令。

总结 ​

综上，对于举例的 create-vue 这个包我们可以有多种方法使用：

npm init vue/ npm create vue/ npm innit vue

npm exec create-vue/ npm x create-vue

npx create-vue