1、从使用者的角度理解脚手架
脚手架简介
脚手架本质是一个操作系统的客户端,它通过命令行执行,比如:
vue create vue-test-app
上面的命令由三个部分组成
-
主命令:
vue -
command:
create -
command的params:
vue-test-app
他表示创建一个vue的项目,项目名称为vue-test-app,以上是一个较为简单的脚手架命令,但实际场景往往更加复杂,比如:
单签文件夹已经有文件了,我们需要覆盖当前目录下的文件,强制进行安装vue项目,此时我们就可以输入:
vue create vute-test-app --force
2、脚手架执行原理
脚手架执行原理如下
-
在终端输入
vue create project -
终端解析出
vue -
在环境变量中找到
vue命令 -
终端根据
vue命令链接到实际文件vue.js -
终端利用
node执行vue.js文件 -
vue.js解析command或者params -
vue.js执行command -
执行完毕,退出执行
3、从应用的角度看如何开发一个脚手架
这里以vue-cli为例🌰:
-
开发
npm项目,该项目包含一个bin/vue.js文件,并将这个项目发布到npm -
将
npm项目安装到node的lib/node_modules -
在
node的bin目录下配置vue的软连接指向lib/node_modules/@vue/cli/bin/vue.js
这样我们在执行vue命令的时候就可以找到vue.js进行执行
疑问解答
1、为什么全局安装的@vue/cli后添加的命令为vue?
npm install -g @vue/cli
答:在/usr/local/lib/node_modules/@vue/cli文件夹下的package.json的
"bin":{ "vue": "bin/vue.js"}
这个软连接的名称就是vue,所以添加后的命令为vue
2、全局安装@vue/cli时发生了什么?
先把@vue/cli下载到/usr/local/lib/node_modules中,然后根据@vue/cli下的package.json,根据bin中定义去/usr/local/bin/下去定义@vue/cli的软链接vue
3、执行vue命令时回发生什么?为什么vue指向一个js文件,我们却可以直接通过vue命令去执行它?
1.终端先在环境变量中找vue指令(相当于 which vue命令),看有木有被注册,未注册则返回command not found,注册了则去找vue指令的软连接指向地址/usr/local/lib/node_modules/@vue/cli/bin/vue.js,去执行vue.js文件中的代码
2.因为这个文件js文件的顶部写了#!/usr/bin/env node标识,故在环境变量中查找node,告诉系统使用node去执行这个js文件。