这是我参与更文挑战的第 6 天，活动详情查看： 更文挑战
2021-06-06 总结 TANGJIE 其他 手脚架基础
前端脚手架开发（一），相见如初识
1. 对脚手架的理解
脚手架本质其实就是操作系统的客户端，通过命令来执行例如在vue-cli官网上能看到创建一个项目就是:vue create hello-world即可：
vue create hello-world 这条命令由3个部分组成：
- 主命令，vue
- command: create
- command 的 param: hello-word
1.1 命令可携带选项
例如：vue create hello-word --force
其实这个force就是命令的options，命令表示当前目录由文件了，需要覆盖当前目录下的文件，强制安装vue项目
其选项还有vue create hello-word --force -r https://registry.npm.taobao.org 这里的-r是options，-r是--registry的简写
一般查看一个手脚架参数的方式是vue --help（查看vue命令的options)vue create --help（查看vue create 命令的options）
1.2 命令选项可携带参数
其实，在使用--help命令的时候，各个options的参数param类型其实已经给了一个说明，这里详细的说一下
例如：vue create hello-word --force -r https://registry.npm.taobao.org 这条命令
-r 后面的 https://registry.npm.taobao.org 就是options -r的一个参数;其实--force也就是 --force true 的一个简写
2. 终端对手脚架命令的处理
可能大部分人使用vue-cli对这个手脚架都没有思考过，我们使用winpty vue.cmd create hello-world(window) 创建一个项目，其终端是怎么对命令进行处理的呢？
以vue-cli手脚架为例进行解析：
2.1 运行winpty vue.cmd create hello-world
这样可以很清楚的看到命令终端给我们创建项目的几个选项（options）
简单的流程是这样子的： 命令->终端,终端通过系统的环境变量找到vue指令（这也就是为什么当这个手脚架安装了，vue命令失败需要我们手动配置vue命令环境变量的原因）
我们可以通过which vue找到这个命令的所在
在我的windows电脑上vue这个shell脚本的目录在/c/Users/Administrator/AppData/Roaming/npm/vue（AppData）可能是一个隐藏文件
由因为vue这个命令本身是依赖于node的，在进入上面的目录，我们可以发现与vue同级还有一个node_modules目录（其实通过npm install xx -g安装的东西都在这个目录），进去可以发现一个文件@vue，再进去就一个cli文件夹，继续就能看到bin和lib这两个重要的文件夹，进入到bin这个文件就能看到一个vue.js的文件，其实这个命令最终执行的也是这个文件
2.2 步骤归纳
- 在终端输入
winpty vue.cmd create hello-world - 终端解析出vue命令
- 终端在环境变量中找到vue命令
- 终端根据vue的命令链接到实际文件的vue.js脚本文件
- 终端利用node去执行vue.js
- vue.js解析成了command/options
- vue.js执行commit
- 执行完毕退出
2.3 从vue-cli看手脚架开发思路
- 开发一个npm项目，该项目中应该包含一个bin/vue.js文件，并发布到npm
- 将npm项目安装到全局的node_modules下
- 在
/c/Users/Administrator/AppData/Roaming/npm下配置vue的软链接（shell脚本)指向同级目录下的node_modules/@vue/cli/bin/vue.js
3 总结
通过vue-cli重新认识，前端手脚架~
