vue-cli自定义实践 1

1、依赖项安装 （初始化 略过）

//commander    download-git-repo chalk
安装
npm i commander download-git-repo chalk

2、 添加入口文件

 package.json 文件

"bin":{
    // 命令 ：入口文件
    "ck":"./bin/cli.js"
    
}

在 bin 文件下创建 cli.js 文件 顶部 加入下面这行

#!/usr/bin/env node    

建好后可以 npm link 一下

执行定义的ck 指令
hello world 执行成功

3、添加commander 命令行

const { program } = require('commander');

program.parse(); // 解析

4、描述信息

const { program } = require('commander');

// 名称，描述，版本号，用法提示。
program
.name('cli')
.description('这是一个脚手架')
.version('0.0.1')
.usage('<command> [options]');

program.parse();

5、创建指令create

const { program } = require('commander');

// 名称，描述，版本号，用法提示。
program
.name('cli')
.description('这是一个的脚手架')
.version('0.0.1')
.usage('<command> [options]');

// 创建 create 命令

program.command('create <app-name>')
.option('-f, --force', 'overwrite target directory if it exist')
.option('-g, --get <path>', 'get value from option')
  .option('-s, --set <path> <value>')
  .option('-d, --delete <path>', 'delete option from config')
.action((name, options) => {
    // 打印执行结果
    require('../lib/create.js')(name,options)
    console.log('name:',name,'options:',options)
  })

program.parse();

验证指令执行结果

6、chalk 命令行美化工具

   program
   // 配置版本号信息
  .version(`v${require('../package.json').version}`)
  .on('--help', () => {
    // 新增说明信息
    console.log(`\r\nRun ${chalk.cyan(`zr <command> --help`)} for detailed usage of given command\r\n`)
    console.log('\r\n' + figlet.textSync('t - e - s - t', {
        font: 'Ghost',
        horizontalLayout: 'default',
        verticalLayout: 'default',
        width: 80,
        whitespaceBreak: true
      }));
  })
  .usage('<command> [option]')

验证

7、inquirer 交互式命令行工具

1、交互式命令行界面。提供了询问操作者问题，获取并解析用户输入，多层级的提示，提供错误回调，检测用户回答是否合法等能力。
安装：npm install inquirer@8.2.5

2、使用

const inquirer = require('inquirer')

const arr = [
  {
    type: 'input',
    name: 'projectName',
    message: '项目名称',
    default: 'vue-demo',
  },
  {
    type: 'list',
    name: 'projectType',
    message: '项目类型',
    default: 'vue2',
    choices: [
      { name: 'vue2', value: 'vue2' },
      { name: 'vue3', value: 'vue3' },
      { name: 'react', value: 'react' }
    ]        
  },
  {
    type: 'checkbox',
    name: 'plugins',
    message: '插件选择',
    choices: [
      { name: 'babel', value: 'babel' },
      { name: 'eslint', value: 'eslint' },
      { name: 'vue-router', value: 'vue-router' }
    ]
  },
  {
    type: 'confirm',
    name: 'confirm',
    message: 'confirm',
  }
];

inquirer.prompt(arr).then(answers => {
  console.log('==============');
  console.log(answers);
}).catch(error => {
  console.log('--------------')
  console.log(error)
})

验证交互式命令

8、根据选中结果 下载对应模板

这部分需求；我们业务上再基础框架配置了较多的业务处理方法 这里直接使用模板的方式。
download-git-repo 下载远程模板

…