脚手架的核心目标：
提升前端研发效
脚手架核心价值
将研发过程：
- 自动化：项目重复代码拷贝/git操作/发布上线操作
- 标准化：项目创建/git flow/发布流程/回滚流程
- 数据化：研发过程系统化、数据化、使得研发过程可量化
@vue-cli 脚手架简介
脚手架本质是一个操作系统的客户端，它通过命令执行，比如：@vue/cli
vue create vue-test-app -r https://registry.npm.taobao.org
// 主命令：vue
//command： create
//command 的 params： vue-test-app
//创建一个名为 vue-test-app vue项目 使用 淘宝镜像 安装依赖
更多的 vue create 参数 执行 vue create --help
@vue/cli 脚手架实现原理
从三个问题入手分析 @vue/cli 实现原理
- 全局安装 @vue/cli 时发生了什么？
-
下载 @vue/cli 的依赖包文件到全局 npm包安装目录，(装node的时候会指定) 默认目录： C:/Users/username/AppData/Roaming/npm/node_modules
-
安装包文件目录 C:/Users/username/AppData/Roaming/npm/node_modules/@vue, 解析 package.json 配置，如果存在 bin 配置 在 C:\Users\hailiang.li\AppData\Roaming\npm 文件下生成 vue 对应的 shell 脚本文件 如下（执行vue 指令的时候实际 是执行的 这个shell 脚本，找到实际执行的vue.js 文件）
#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
*CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac
if [ -x "$basedir/node" ]; then
"$basedir/node" "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
ret=$?
else
node "$basedir/node_modules/@vue/cli/bin/vue.js" "$@"
ret=$?
fi
exit $ret
- 执行vue命令时发生了什么？为什么 vue 指向一个 js 文件， 我们却可以直接通过vue 命令 去执行它。 执行 vue 命令的时候
- 执行 which vue 命令， which 指令会在环境变量 $PATH 设置的目录里查找符合条件的文件（地址：C:\Users\username\AppData\Roaming\npm\vue ---- 这个文件实际是一个 shell 脚本）
- 然后执行 vue 的shell 脚本， 查找到 vue实际执行文件 最终找到C:\Users\hailiang.li\AppData\Roaming\npm\node_modules@vue\cli\bin\vue.js 文件
- bin/vue.js 文件头部声明
#!/usr/bin/env node告诉操作系统 node 执行这个文件，完成 vue 命令注册
执行 vue 命令 在环境变量 C:\Users\hailiang.li\AppData\Roaming\npm 中找到注册的 vue 命令 ，
软链接 指向 C:\Users\hailiang.li\AppData\Roaming\npm\vue 实际执行的 vue.js 文件
概述如下：
- 在终端中输入 vue create vue-test-app
- 终端解析出vue命令 （which vue 解析出 vue 软链接：/c/Users/username/AppData/Roaming/npm/vue）
- 终端在环境变量中找到 vue 命令
- 终端根据 vue 命令链接到实际文件vue.js （C:\Users\username\AppData\Roaming\npm\node_modules@vue\cli\bin\vue.js）
- 终端利用node执行 vue.js
- vue.js 解析 command/options
- vue.js 执行 command
- 执行完毕，退出执行
- 为什么全局安装 @vue/cli 后会添加的命令为 vue 而不是 vue-cli ? package.json 下bin 配置
