background

The previous project was either built by predecessors, or built from VUe-CLI, and then transferred some common code of the old project. It was estimated that these operations would not be able to run within an hour. Therefore, it was a time-saving thing to build our own template.

This article will not cover the principle and implementation of VUE-CLI. Interested students can read the source code from vue-CLI to learn how to write templates. This article is well written, enough to understand the principle of VUe-CLI.

How do I modify the template file

First, we need to download the official Template /webpack project from template/webpack. The main changes are to the meta.js file and template directory in the root directory.

Meta. Js:

There are two major changes: Prompts and filters, as those of you who have used the Inquirer library know, prompt is a command line prompt that answers questions using the command vue init webpack my-project. It relies on the prompt module;

Prompts.
prompts: {
    name: {
      when: 'isNotTest'.// Ask when representing not test (see the scenarios/index.js file for isNotTest)
      type: 'string'.// The type of the problem, where string represents the input project name
      required: true.// Name must be entered
      message: 'Project name'.// A description of the problem
    },
    lint: {
      when: 'isNotTest'.type: 'confirm'.message: 'Use ESLint to lint your code? ',},lintConfig: {
      when: 'isNotTest && lint'.// means not test and will only be asked if the above lint question is set to yes
      type: 'list'.// Choose your answer from choices
      message: 'Pick an ESLint preset'.choices: [{name: 'Standard (https://github.com/standard/standard)'.value: 'standard'.short: 'Standard'}, {name: 'Airbnb (https://github.com/airbnb/javascript)'.value: 'airbnb'.short: 'Airbnb'}, {name: 'none (configure it yourself)'.value: 'none'.short: 'none',}],}}Copy the code
// filters(excerpt)
filters: {
    '.eslintrc.js': 'lint'.// the.eslintrc.js file will only be created if The Lint problem is set to yes
    'build/webpack.test.conf.js': "unit && runner === 'karma'".// the webpack.test.conf.js file is created only if the Unit problem selects yes and the Runner problem selects karma
    'src/router/**/*': 'router' // SRC /router the directory will be created only if the router question is yes
  }
Copy the code

The template:

  • Write EOF conditions

vue init 

// package.json/scripts
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    {{#if_eq runner "jest"}}
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    {{/if_eq}}
    {{#if_eq runner "karma"}}
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    {{/if_eq}}
    {{#e2e}}
    "e2e": "node test/e2e/runner.js",
    {{/e2e}}
    {{#if_or unit e2e}}
    "test": "{{#unit}}npm run unit{{/unit}}{{#unit}}{{#e2e}} && {{/e2e}}{{/unit}}{{#e2e}}npm run e2e{{/e2e}}",
    {{/if_or}}
    {{#lint}}
    "lint": "eslint --ext .js,.vue src{{#unit}} test/unit{{/unit}}{{#e2e}} test/e2e/specs{{/e2e}}",
    {{/lint}}
    "build": "node build/build.js"
  }
Copy the code

The package.json file is interspersed with EOF style tags, which can be divided into two types (you can extend the EOF criteria yourself)

{{#lint}}** {{/lint}} means that the contents of the tag will only exist if the lint problem is set to Yes

{{#if_eq runner “jest”}}***{{/if_eq}} indicates that the contents of the tag only exist if the answer to the runner’s question is equal to jest, Individuals can extend EOF conditional commands (if_eq and unless_eq by default in lib/generate.js)

  • Modifying a File Directory

Change the template directory structure to the SRC directory structure you prefer

My own template

Making: masongzhi/vue – the template – webpack

Vue init masongzhi/vue-template-webpack my-project

Vue – the template – webpack features:

  • Based on the Template/Webpack template
  • Customize the directory structure
  • Added the VUex option
  • Add filters options
  • Add mock server options
  • Add the option for prettier (if lint is not selected)

conclusion

In fact, I found that in the case of not introducing the principle, feel to write quite messy, so we can first read from vuE-CLI source code to learn how to write templates, and then see this article for practice;

Once you’ve created your own template, it’s really convenient to build a new project without having to copy and paste it manually.

ps

Project article: JSON-server practice and custom configuration