从使用角度理解脚手架脚手架cli架构设计

脚手架是什么？

从使用的角度来看脚手架各个部分如何去定义

脚手架简介脚手架本质是一个操作系统的客户端，通过命令行执行，比如：

“脚手架本质是一个操作系统的客户端”：在终端当中执行一个命令，这个命令本身就是一个客户端。

创建一个vue的项目 vue create vue-app
【从使用角度理解脚手架】这个命令是由3个部门组成：

主命令： vue
command：create

子命令：创建一个项目；

可以理解为一条子命令，向主命令（脚手架）去发送一个请求，让脚手架去完成一个动作，完成的动作就是create（创建）。
command的param： vue-app
vue create vue-app表示创建一个名字叫做“vue-app”的vue项目。

覆盖当前目录下的文件，强制安装vue项目 vue craete vue-app --force

--force

--force叫做option，用来辅助脚手架确认在特定场景下用户的选择，如果在已有vue-app文件夹的前提，还去执行vue craete vue-app，命令将会被中断。

淘宝源来安装

通过vue create创建项目时，会自动执行npm install帮用户安装依赖，如果希望使用淘宝源路径来安装，可以输入命令：

vue create vue-app --force -r https://registry.npm.taobao.org

-r

-r 也是option，与--force不同是他的使用-，是一种简写；-r也可以替换成--registry
-r后面的https://registry.npm.taobao.org是option的param，其实--force也可以理解为：--force true，简写为：--force 或 -f

vue create支持的所有options

vue create --help

文章图片

脚手架执行过程和原理

终端是如何处理 vue create vue-app

第一步终端会在环境变量中找到vue指令；

which vue

文章图片

由此可见是在，node安装目录下的bin目录中的vue
进入

/Users/ohh/nvm/versions/node/v8.16.0/

cd 进入
ls -l

文章图片

cd bin\
ls -l

文章图片

lrwxr-xr-x1 chensistaff392 132020 vue -> ../lib/node_modules/@vue/cli/bin/vue.js

lrwxr-xr-x中 l代表超链接，链接到/lib目录下/node_modules/@vue/cli/bin/vue.js

看下链接目录

在node目录下，进入

cd lib/node_modules
ls -l

lib/node_modules

是全局依赖，所有通过npm install -g 装好的包，都会放在这个目录下面

文章图片

要使用vue命令，必须要使用

npm i -g @vue/cli

全局命令中就会有@vue这个命令

进入主目录看下，vue cli 的源码文件

cd \@vue/
cd cli/

文章图片

源码下有一个bin目录

文章图片

脚手架执行原理如下：

文章图片

在终端输入 vue create vue-app
终端解析出vue命令
终端去环境变量中找到vue命令
根据vue命令连接到实际的vue.js
终端利用node执行vue.js
vue.js解析command/options
vue.js 执行command
执行完毕，退出执行

从应用的角度来观察怎么开发脚手架

以 vue-cli为例

开发npm项目，该项目中应包含一个bin/vue.js文件，并将这个项目发布到npm
将npm项目安装到node的lib/nonde_modules
将node的bin目录下配置的vue软链接指向/lib/node_modules/@vue/cli/bin/vue.js
在执行vue命令的时候就可以找到vue.js进行执行