前端脚手架开发（一），相见如初识

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重新认识，前端手脚架~

前端脚手架开发（一），相见如初识

前端脚手架开发（一），相见如初识

1. 对脚手架的理解

1.1 命令可携带选项

1.2 命令选项可携带参数

2. 终端对手脚架命令的处理

2.1 运行winpty vue.cmd create hello-world

2.2 步骤归纳

2.3 从vue-cli看手脚架开发思路

3 总结

2.1 运行`winpty vue.cmd create hello-world`