Customize and create simple Vue-cli scaffolding tools

Simple scaffolding project directory:

This article is used to record scaffolding learning

1.index.js is the core source code
2.templates.js is the package.json template ;
3.package.json manages dependent packages and command lines ;

---

1. index.js source code

#!/usr/bin/env node
// 命令行工具
const program = require('commander')
// 快速克隆指定版本的仓库
const download = require('download-git-repo')
// 模板引擎工具
const handlebars = require('handlebars')
// 向导的方式采集用户输入的值
const inquirer = require('inquirer')
// 文件读取和写入
const fs = require('fs')
// loading工具
const ora = require('ora')
// 显示样式
const chalk = require('chalk')
// 显示图标
const logSymbols = require('log-symbols')
// 模板列表文件,用于查询当前脚手架有什么模板的项目
const templates = require('./templates')

program
  .version('0.1.0') // -v 或者 --version 的时候会输出该版本号

program
  .command('init <template-name> [project-name]')
  .description('初始化项目模板')
  .action((templateName, projectName) => {
    
    
    console.log(templateName, projectName)
    // loading 提示
    const spinner = ora('正在下载模板...').start()

    // download
    //    第一个参数：仓库地址
    //    第二个参数：下载路径
    const {
    
     downloadUrl } = templates[templateName]
    download(downloadUrl, projectName, {
    
     clone: true }, (err) => {
    
    
      if (err) {
    
    
        spinner.fail()
        console.log(logSymbols.error, chalk.red(err))
        return
      }

      spinner.succeed()

      // 使用向导的方式采集用户输入的值
      inquirer.prompt([{
    
    
        type: 'input',
        name: 'name',
        message: '请输入项目名称',
        default: projectName
      }, {
    
    
        type: 'input',
        name: 'description',
        message: '请输入项目简介'
      }, {
    
    
        type: 'input',
        name: 'author',
        message: '请输入作者名称'
      }]).then((answers) => {
    
    
        // 把项目下的 package.json 文件读取出来
        const packagePath = `${
      
      projectName}/package.json`
        const packageContent = fs.readFileSync(packagePath, 'utf8')

        // 使用模板引擎把用户输入的数据解析到 package.json 文件中
        const packageResult = handlebars.compile(packageContent)(answers)

        // 解析完毕，把解析之后的结果重新写入 package.json 文件中
        fs.writeFileSync(packagePath, packageResult)

        console.log(logSymbols.success, chalk.yellow('初始化模板成功'))
      })
    })
  })

program
  .command('list')
  .description('查看所有可用模板')
  .action(() => {
    
    
    for (let key in templates) {
    
    
      console.log(`
${
      
      key}  ${
      
      templates[key].description}`)
    }
  })

// 没有任何命令的时候输出使用帮助
if (!process.argv.slice(2).length) {
    
    
  program.outputHelp()
}

program.parse(process.argv)

---

2. template.js source code

module.exports = {
    
    
  'tpl-a': {
    
    
    url: 'https://github.com/lipengzhou/tpl-a',
    downloadUrl: 'http://github.com:username/tpl-a#master',
    description: 'a模板'
  },
  'tpl-b': {
    
    
    url: 'https://github.com/lipengzhou/tpl-b',
    downloadUrl: 'http://github.com:username/tpl-b#master',
    description: 'b模板'
  },
  'tpl-c': {
    
    
    url: 'https://github.com/lipengzhou/tpl-c',
    downloadUrl: 'http://github.com:username/tpl-c#master',
    description: 'c模板'
  }
}

---

3. package.json source code

{
    
    
"author": "",
  "bin": {
    
    
    "itcast": "index.js"
  },
  "bundleDependencies": false,
  "dependencies": {
    
    
    "chalk": "^2.4.1",
    "commander": "^2.17.1",
    "download-git-repo": "^1.1.0",
    "handlebars": "^4.0.11",
    "inquirer": "^6.1.0",
    "ora": "^3.0.0"
  },
  "deprecated": false,
  "description": "",
  "keywords": [],
  "license": "ISC",
  "name": "itcast-cli",
  "scripts": {
    
    
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "version": "1.0.1"
}

• After we configure these three files, we can publish this project to npm. After publishing to npm, we will install the plug-in globally on our computer, so that the webFe command line in packages.json in the plug-in can be used, such as
  :

webFe create 模板名 项目名

Personal understanding:

1. The scaffolding project is understood as a node script file, execute i index.js in the node environment, execute the pre-configured command, select the specified template, clone the code of the specified template from a distance, and then use the input collected from the user to modify the specified file in the cloned project, and finally quickly generate the vue project
2. The commands we configure can not only be used to specify the version of the template and then clone the project to the local, but also use instructions to create components in the vue project and automatically generate routing files and description files, etc...