vue腳手架寫法

一直想建一個本身公司自用的腳手架，能夠方便的快速開發。因而開始看vue-cli的源碼和一些網上的教程。發現，一款腳手架其實很簡單，主要原理就是從遠程下載一個模板來新建一個項目。同時提供了一系列的交互來動態的更改模板。
下面先將創建一款腳手架可能用到插件及其使用方法列出：

一、commander

用來編寫指令和處理命令行
安裝commander:
npm install commander --save

主要api解析

(1)version

做用：定義版本號
用法：.version('0.0.1', '-v --version')
參數解析：

• 版本號(必須)
• 自定義標誌(可省略)：默認爲-V和--version

(2)option

做用：定義命令選項
用法：.option('-n --name<path>', 'name description', 'default name')
參數解析：

• 自定義標誌<必須>：分爲長短標識，中間用逗號、豎線或者空格分割；標誌後面可跟必須參數或可選參數，前者用 <> 包含，後者用 [] 包含
• 選項描述<可省略>：在使用 --help 命令時顯示標誌描述
• 默認值<可省略>

例子：

program
  .version('0.1.0', '-v, --version')
  .option('-i, --init', 'init something')
  .option('-g, --generate', 'generate something')
  .option('-r, --remove', 'remove something');

(3)command

做用：添加命令名稱
用法：.command('rmdir <dir> [otherDirs...]', 'install description', opts)
參數解析：

• 命令名稱<必須>：命令後面可跟用 <> 或 [] 包含的參數；命令的最後一個參數能夠是可變的，像實例中那樣在數組後面加入 ... 標誌；在命令後面傳入的參數會被傳入到 action 的回調函數以及 program.args 數組中
• 命令描述<可省略>：若是存在，且沒有顯示調用action(fn)，就會啓動子命令程序，不然會報錯
• 配置選項<可省略>：可配置noHelp、isDefault等

(4)description

做用：定義命令的描述
用法：.description('rmdir desc')

(5)action

做用：定義命令的回調函數
用法：.action(fn)

(6)parse

做用：解析process.argv，設置options以及觸發commands
用法：.parse(process.argv)

（7）on
做用：自定義監聽事件
用法：.on('name', fn)
例子：

// 必須在.parse()以前，由於node的emit()是即時的
program.on('--help', function(){
 console.log('  Examples:');
  console.log('');
  console.log('    this is an example');
  console.log('');
});

program.on('option:verbose', function(){
  process.env.VERBOSE = this.verbose;
})

//error on unkown commands
program.on('command:*', function(){
  console.error('Invalid command: %s\nSee --help for a list of available commands.', program.args.join(' '))
  process.exit(1);
})

綜合用法示例

// 引入依賴
var program = require('commander');
 
// 定義版本和參數選項
program
  .version('0.1.0', '-v, --version')
  .option('-i, --init', 'init something')
  .option('-g, --generate', 'generate something')
  .option('-r, --remove', 'remove something');
 
// 必須在.parse()以前，由於node的emit()是即時的
program.on('--help', function(){
 console.log('  Examples:');
  console.log('');
  console.log('    this is an example');
  console.log('');
});
 
program.parse(process.argv);
 
if(program.init) {
  console.log('init something')
}
 
if(program.generate) {
  console.log('generate something')
}
 
if(program.remove) {
  console.log('remove something')
}

var program = require('commander')
program
  .version('0.1.1')
  .command('rmdir <dir> [otherDirs...]')
  .action(function(dir, otherDirs){
    console.log('rmdir %s', dir)
    if(otherDirs){
        otherDirs.forEach(function(oDir){
          console.log('rmdir %s', oDir)
        })
    }
  })
  
program.parse(process.argv)

執行 node index.js rmdir ./test aaa

參考連接：
https://blog.csdn.net/qq_4012...
https://www.cnblogs.com/miran...

二、inquirer

用來進行交互式命令行
安裝：npm install inquirer --save
語法結構：

const inquirer = require('inquirer');

const promptList = [
    // 具體交互內容
];

inquirer.prompt(promptList).then(answers => {
    console.log(answers); // 返回的結果
})

基本api
type：表示提問的類型，包括：input, confirm, list, rawlist, expand, checkbox, password, editor；
name: 存儲當前問題回答的變量；
message：問題的描述；
default：默認值；
choices：列表選項，在某些type下可用，而且包含一個分隔符(separator)；
validate：對用戶的回答進行校驗；
filter：對用戶的回答進行過濾處理，返回處理後的值；
transformer：對用戶回答的顯示效果進行處理(如：修改回答的字體或背景顏色)，但不會影響最終的答案的內容；
when：根據前面問題的回答，判斷當前問題是否須要被回答；
pageSize：修改某些type類型下的渲染行數；
prefix：修改message默認前綴；
suffix：修改message默認後綴。

使用示例

var inquirer = require('inquirer');
const promptList = [{
    type: 'input',
    message: '設置一個用戶名',
    name: 'name',
    default: 'test_user'
},{
    type: 'input',
    message: '請輸入手機號',
    name: 'phone',
    /*validate: function(val){
        if(val.match(/\d{11}/g)){
            //return val
        }
        return "請輸入11位數字"
    }*/
},{
    type: 'confirm',
    message: '是否啓用監聽',
    name: 'watch',
    prefix: '前綴',
    suffix: '後綴',
    when: function(answers){
        //當watch爲true時，開始提問
        return answers.watch
    }
},{
    type: 'list',
    message: '請選擇一種水果',
    name: 'fruit',
    choices:[
        "Apple",
        "Pear",
        "Banana"
    ], 
    filter: function(val){
        //將回答變爲小寫
        return val.toLowerCase()
    }
}]

inquirer.prompt(promptList).then(answers => {
    // 回調函數，answers 就是用戶輸入的內容，是個對象
    console.log(answers)
})

三、chalk

設置控制檯輸出內容的樣式
使用示例

const chalk = require('chalk')
//控制顏色
console.log(chalk.green('success'))
console.log(chalk.blue.bgRed.bold('Hello world'))
console.log(chalk.underline.bgBlue('lala'))

ora

提供一個加載中效果
使用示例

const ora = require('ora')
//出現加載效果
let spinner = ora('downloading template')
spinner.start()
//加載失敗效果
spinner.fail()
//結束加載效果
spinner.succeed()

download-git-repo

下載遠程模板：支持github、gitlab等
使用語法：

const download = require('download-git-repo')
download(repository, destination, options, callback)

repository爲遠程倉庫地址，destination爲下載的文件路徑，默認當前目錄，options時一些選項，好比clone:boolean表示用http下載仍是git clone的形式下載