手把手搭个vue的脚手架 - 1. 脚手架搭建

开发思路：

1. 生成自己的命令，如：vue create hello-word
2. 执行create命令
3. create命令生成模板，生成模板的方式我们可以通过git clone一个项目下来
4. 如何自动执行git clone呢
5. 克隆完成，然后呢？

开发历程：

1. 所谓生成自己的命令，其实就是写了一些js脚本，通过node去执行
2. 一般情况我们通过node运行js脚本是这样的：node app.js。现在要改成 my_vue xxx 去执行。这种情况就需要通过npm init生成package.json文件，然后在package里配置bin命令。最后在需要执行的文件 app.js 头部加上声明：#!/usr/bin/env node
3. 接着执行 npm i -g，你就把当前命令安装在全局啦。
4. 现在就应该在app.js 里添加对应的命令了。当前我们通过 my_vue 可以执行app.js文件了，但是 my_vue xxx 后面的参数xxx需要通过 commander 获取，监测到不同的参数执行不同的命令
5. create命令里通过 child_process下面的 exec执行git clone命令下载一个模板，作为我们的初始化项目
6. 最后把我们的包发布到npm，第一阶段完成

代码：

=== app.js ===
#!/usr/bin/env node

/** 以上是省略node xxx 运行的声明， 需要在package 里额外配置运行命令 **/

const program = require('commander')

/** 定义参数 **/
program
    .version('0.0.1')
    .option('-m, --msg', '项目介绍：自己搭的vue脚手架')
    .parse(process.argv);


/** 定义命令 **/
program
    .command('create <name>')
    .description('初始化项目')
    .action(function(name){
        console.log('生成项目:', name);
        require('./bin/create')(name)
    });

program.parse(process.argv);


=== create.js ===

'use strict'
const exec = require('child_process').exec
const co = require('co')
const chalk = require('chalk')

module.exports = (proName) => {
    co(function *() {
        let cmdStr = `git clone https://github.com/tj/commander.js.git ${proName}`

        console.log(chalk.green('\n 下载模版...'))

        exec(cmdStr, (error, stdout, stderr) => {
            if (error) {
                console.error('\n 下载失败了')
                console.error(error)
                process.exit()
            }
            console.log(chalk.green('\n √ 项目初始化成功!'))
            process.exit()
        })
    })
}