脚手架开发流程详解

开发流程

• 创建npm项目
• 创建脚手架入口文件，最上方添加

#!/usr/bin/env/ node

• 配置package.json，添加bin属性
• 编写脚手架代码
• 将脚手架发布到npm

使用流程

• 安装脚手架

npm install -g your-own-cli

• 使用脚手架

your-own-cli

脚手架开发难点解析

• 分包：将复杂的系统拆分成若干个模块
• 命令注册：

vue create
vue add
vue invoke

• 参数解析

vue command [options] <params>

• options全称：–version、–help

• options简写：-V、-h

• 带params的options: --path /Users/sam/Desktop/vue-test

• 帮助文档：
  global help:
  Usage
  Options
  Commands
  示例：vue 的帮助信息

Options:-V, --version                              output the version number-h, --help                                 display help for commandCommands:create [options] <app-name>                create a new project powered by vue-cli-serviceadd [options] <plugin> [pluginOptions]     install a plugin and invoke its generator in an already created projectinvoke [options] <plugin> [pluginOptions]  invoke the generator of a plugin in an already created projectinspect [options] [paths...]               inspect the webpack config in a project with vue-cli-serviceserve                                      alias of "npm run serve" in the current projectbuild                                      alias of "npm run build" in the current projectui [options]                               start and open the vue-cli uiinit [options] <template> <app-name>       generate a project from a remote template (legacy API, requires@vue/cli-init)config [options] [value]                   inspect and modify the configoutdated [options]                         (experimental) check for outdated vue cli service / pluginsupgrade [options] [plugin-name]            (experimental) upgrade vue cli service / pluginsmigrate [options] [plugin-name]            (experimental) run migrator for an already-installed cli plugininfo                                       print debugging information about your environmenthelp [command]                             display help for commandRun vue <command> --help for detailed usage of given command.

• command help
  Usage
  Options
  vue create的帮助信息：

Usage: vue create [options] <app-name>create a new project powered by vue-cli-serviceOptions:-p, --preset <presetName>       Skip prompts and use saved or remote preset-d, --default                   Skip prompts and use default preset-i, --inlinePreset <json>       Skip prompts and use inline JSON string as preset-m, --packageManager <command>  Use specified npm client when installing dependencies-r, --registry <url>            Use specified npm registry when installing dependencies (only for npm)-g, --git [message]             Force git initialization with initial commit message-n, --no-git                    Skip git initialization-f, --force                     Overwrite target directory if it exists--merge                         Merge target directory if it exists-c, --clone                     Use git clone when fetching remote preset-x, --proxy <proxyUrl>          Use specified proxy when creating project-b, --bare                      Scaffold project without beginner instructions--skipGetStarted                Skip displaying "Get started" instructions-h, --help                      display help for command

还有很多，比如：

• 命令行交互
• 日志打印
• 命令行文字变色
• 网络通信：HTTP/WebSocket
• 文件处理
  等等…