构建一个CLI脚手架

一、准备条件

npm模块

commander： node.js 命令行接口的完整解决方案
官网地址：https://github.com/tj/commander.js/blob/master/Readme_zh-CN.md
inquirer： 用户命令行交互
官网地址：https://github.com/SBoudrias/Inquirer.js
download-git-repo： 用于下载GitHub, GitLab, Bitbucke的文件
官网地址：https://www.npmjs.com/package/download-git-repo
chalk：改变log的文字颜色
官网地址：https://github.com/chalk/chalk
ora： 下载显示的loading
官网地址：https://github.com/sindresorhus/ora

目前使用的版本

二、项目搭建

1. 新建文件夹，npm init -y 初始化package.json文件，并安装以上所有依赖
2. 在项目中新建bin文件夹，用来存放命令代码，并在bin文件夹中创建vue-template-cli.js文件
3. vue-template-cli.js 文件中写入以下代码

• #! /usr/bin/env node 用于指定该脚本使用node来执行，系统动态查找node，解决不机器和系统中的差异
• version指定当前cli的版本；
• command指定一个子命令，为命令绑定一个操作处理程序，这里的create命令会自动查找vue-template-cli-create.js执行
• parse 解析用户输入的参数
• on命令，监听–hlep或者-h 参数

4. vue-template-cli-create.js 文件中写入以下代码

• commander的action命令用于操作处理程序的，可以获取到用户输入的所有参数
• inquirer.prompt(),的参数是个数组，数组中是每个命令交互对象，type类型有很多种，可以查看官网
• download-git-repo这个模块的参数，需要下载的项目地址不是平常clone的地址，而是github:+下面的地址

5. 在package.json中加入npm的模块名称以及主文件

三、上传npm并使用

1. 如果没有npm账号，去npm官网注册账号后，在命令行输入npm login 登录，然后使用npm publish 上传至npm仓库即可
2. npm install -g vue-template-cli 全局安装，使用vue-template-cli create ‘项目名称’ 创建项目即可

关注我：前端Jsoning