持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情

一、初始化

引言

为什么要自己开发一个脚手架呢？ 为什么不用 vue 官方给的脚手架呢？

其实 vue 官方的脚手架很不错的

但是呢，在自己做一些 demo 的时候，总是创建好项目后，就复制粘贴，虽然说这样也累不着。

但是重复久了，就想开发一个自己的 vue 脚手架，并且自己目前还不知道 脚手架 是如何开发的，所以总归得学习下，知道下。

脚手架搭建

1. 初始化

找一个文件夹，在内部先通过命令 npm init -y 生成 package.json 文件

这里可以先改一下你的 package.json 中的 name，后续用作自己脚手架的命令

之后在与之同级的目录下创建 bin/index.js

// bin/index.js
#! /usr/bin/env node
console.log("hello wzms-cli");

这里先来解释下，这行代码 #! /usr/bin/env node

• #! 是 shebang，是一个固定的

• /usr/bin/env 这个也是固定的，意思是在这个环境中去寻找

• node 找的是 node 指令

2. 关联操作

创建好了之后，我们进行关联操作

• 首先在 package.json 中添加指令的执行位置

  

• 之后在命令行中输入 npm link，来将这个命令关联到全局

  

  从上图中，可以很清楚的看到，我这边关联的命令是 wzms-cli，并且成功绑定到我们对应的 bin/index.js 文件中

3. 使用、删除、查找

使用

上面关联成功后，我们就可以执行 wzms-cli 这个命令了

可以看到我们的代码结果，成功的被打印出来了，证明我们的命令生效了

删除

既然这个命令生效了，我们肯定还要一个操作就是，如何删除 wzms-cli 这个命令

npm rm --global wzms-cli

查找

上面我们已经成功删除了，所以我们这里分 三 步

• 先 查找

• 再 添加 一下

• 之后再 查找

具体的命令和实现效果图 如下：

npm ls --global wzms-cli

npm link

npm ls --global wzms-cli

总结

这里成功将我们的 cli 命令，绑定到系统中， 能够通过 cli 的 name 来执行命令。

以及 这个命令的 使用、删除、查找 操作