Vue-cli allows you to create projects quickly and without configuration. Vue-cli writes webpack configurations for you, and when creating projects you can interactively integrate vue-Router, post-CSS,less or Sass, Babel, ESLint, etc. There is also a very user-friendly graphical interface to help us complete our own project configuration.

But our project always has configuration that needs customization, for example, we need to introduce the UI framework we want, for example, we want to introduce AXIos to do HTTP requests, etc. Project development at ordinary times, often with the background of HTTP interaction is agreed upon, the project configuration need to write a good, but through the vue – cli after a key generation project, the relevant configuration we still have to write again, more troublesome, so we can complete a personalized configured scaffolding, at ordinary times when creating the project generated by the scaffolding of a key, And complete all necessary configurations at the same time for rapid development.

The scaffold is completed on the premise of uploading their configured template project to github warehouse, using their configured VUE project as the template to create a new project;

1, the working principle of scaffolding

(1) Ask users questions through command line interaction;

(2) Generate files according to the results of user answers;

2. Create the CLI

(1) Create a CLI folder, use NPM init to generate package.json file, and delete unnecessary scripts fields;

(2) Create bin.js file in the root directory of the project, add a bin field to the package.json file and point to bin.js, which is used to specify the entry file of the module:

"bin": "bin.js".Copy the code

(3) Note that we need to add #! To the header of the bin.js file. /usr/bin/env node, which specifies that the file needs to be run using Node.

(4) In the terminal through NPM link to map our package to the global, so that we can run the module name to run our module, to facilitate our local test.

Now that the setup is complete, we can write our module’s logic in the bin.js file.

3. Create dependent modules for the CLI

Commander implements console command line problem interaction;

Chalk colors the text output from the console;

Download-git-repo pulls the github project code;

Ora implementation of the console progress bar style;

4. Implement scaffolding code

1. Introduce required dependencies

#! /usr/bin/env node

const program = require('commander'); // CMD console interaction const ora = require('ora'); // progress bar const chalk = require('chalk'); Const download = require('download-git-repo'); // pull github project const fs = require('fs');
Copy the code

2. Configure the styles of error copy and success copy

// const success = chalk. BlueBright; const error = chalk.bold.red;Copy the code

3, set the github template project address link

const templateUrl = 'direct:https://github.com/chang229/vue.git'; // Github project addressCopy the code

Create command

program.version('0.1.0 from')
  .option('-i, init [name]'.'Initialize the project')
  .parse(process.argv);
Copy the code

Create a project quickly by running the init command. Pargram. init can get the project name after init. 5. Start pulling the code after running init

// Pull the project codeif (program.init && typeof program.init === "string") {
    const spinner = ora('Pulling template... ').start(); // Open the progress bar download(templateUrl, program.init, {clone: true }, function (err) {
        if(! err) { spinner.succeed(success('Pull successful')); // Change name and version number in package.json changePackage()}else {
            console.log(err);
            spinner.fail('Pull failed'); }}); }else {
    console.error(error('Please enter the directory name after init'));
}
Copy the code

6. Replace the name field in the package.json file in the template file

// Replace the name field of the template package.json file const changePackage = () => {fs.readfile ('${process.cwd()}/${program.init}/package.json`, (err, data) => {
        if (err) throw err;
        let _data = JSON.parse(data.toString());
        _data.name = program.init;
        _data.version = '1.0.0';
        let str = JSON.stringify(_data, null, 4);
        fs.writeFile(`${process.cwd()}/${program.init}/package.json`, str, function (err) {
            if(err) throw err; })}); };Copy the code

5, complete

Once the console progress is complete, you can CD into the project you created, run NPM Install to install all dependencies, and have fun developing the project.