Written in 2017.10.20

Vue-cli is a tool familiar to most of you who have used VueJS. Vue-cli allows us to easily initialize a VUE project with a very simple q&A format, without having to worry about cumbersome WebPack, ESLint configurations, etc.

However, there are still many students who do not understand the relationship between VUE-CLI and VUE project, resulting in not giving full play to vue-CLI functions. In this article, I’ll start with the underlying principles and combine them with a few examples to show you how vuE-CLI can be used in this way.

What is a vue – cli

A quote from vue-CLI official documentation:

A simple CLI for scaffolding Vue.js projects. A simple vue.js project command line scaffolding tool.

After a global installation of VUE-CLI, we can initialize our VUE project with a single command:

vue init <template-name> <project-name>
Copy the code

Vue-cli then throws several question-and-answer options based on the Settings inside the

template. After answering the question and answer options, our vue project directory has been generated, then as long as the dependencies are installed, can directly run, is not very convenient?

Now, we’re going to see what’s going on behind this command.

Vue-cli initialization project principle

With –clone, you can run git clone and pull the remote git repository to the local directory by cloning it. If the –clone parameter is added, the remote git repository will be pulled to the local directory by cloning. It’s important to understand this:

Vue-cli does not create a project from scratch, but by downloading/pulling the existing project to the local, complete the project generation work.

This “existing project” is called a “template”.

Of course, vue-CLI does more than just pull templates locally. It also allows you to personalize templates in the form of questions and answers. How does this work?

Vue-cli uses inquirer. Js to implement “q&A”, which looks like this briefly:

Const questions = [{type: 'input', name: 'name', message: 'What's your name?'}, {type: 'input', name: 'age', message: 'How old are you?', } ]Copy the code

Then send this question to Inquirer. Js:

inquirer.prompt(questions).then(({ name, age }) = > {
  console.log(`My name is ${name}, and I'm ${age} years old`)})Copy the code

At runtime, vue-CLI displays What’s your name? And How old are you? These two questions are thrown in succession, taking user input and assigning that input to the name and age variables so that you can get the user’s input. Which brings us to the next question, how does this user input relate to customization of the template?

We open up a vue-CLI template, such as readme. md in Webpack-Simple, which looks like this:

# {{ name }}

> {{ description }}
Copy the code

What is wrapped in double parentheses above will eventually be changed to concrete content based on user input. Does that sound familiar to you? This is the template syntax of Handlebars.

In the case of the readme. md file, vue-CLI will first read the contents of the file and store them in memory, then get user input from Inquirer. Js will replace the input values with the contents of the file, and finally use another tool called Metalsmith. Output the replaced content as a file, and you generate a readme.md file with personalized content.

The whole process is not complicated, and once we understand these principles, we can use vuE-CLI more deeply.

Javascript and Java, Vue- CLI and Vue

It’s not a very accurate analogy, but I think you get the idea.

Vue-cli initializes not only vue projects, but also all projects, including React, Angular, etc., as long as you have a working template, vue-CLI initializes projects.

There were many similar questions on the discussion board:

  • How do I configure Sass in VUe-CLI?
  • How do I change the port of devServer in VUe-CLI?
  • “Vue-cli found project not running”
  • …

Vue-cli said, “I can’t carry this pot.”

Yes, the problems encountered are not vue-CLI problems, but related template problems. So how to write a qualified template? Let’s take a look at it.

Write a VUE-CLI template

If you still don’t know how to write it by referring to the official documentation, you can go straight to the official example, Webpack-Simple, and see how it actually works.

First we can see the directory structure:

Json is the question thrown to the user, and the /template directory is the actual template content. Let’s take a look at what meta. Json says:

{
  "prompts": {
    "name": {
      "type": "string"."required": true."label": "Project name"
    },
    "description": {
      "type": "string"."required": true."label": "Project description"."default": "A Vue.js project"
    },
    "author": {
      "type": "string"."label": "Author"
    },
    "sass": {
       "type": "confirm"."message": "Use sass?"."default": false}},"completeMessage": "{{#inPlace}}To get started:\n\n npm install\n npm run dev.{{else}}To get started:\n\n cd {{destDirName}}\n npm install\n npm run dev.{{/inPlace}}"
}
Copy the code

As you can see, it asks the user four questions in total:

  • Project name
  • Project description
  • Author
  • Use sass?

Next, let’s open the /template directory and see what it looks like:

This is the project catalog that will eventually be generated. Open package.json inside:

{" name ":" {{name}} ", "description" : "{{description}}", "version" : "1.0.0", "author" : "{{an}}", "private" : true, "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "vue": "^ 2.4.4"}, "devDependencies" : {" Babel - core ":" ^ 6.26.0 ", "Babel - loader" : "^ 7.1.2", "Babel - preset - env" : "^ 1.6.0", "cross - env" : "^ 5.0.5", "CSS - loader" : "^ 0.28.7", "file - loader" : "^ 1.1.4", {{# sass}} "node - sass" : "^ 4.5.3 sass -", "loader" : "^ 6.0.6", {{/ sass}} "vue - loader" : "^ 13.0.5", "vue - the template - the compiler" : "^ 2.4.4", "webpack" : "^3.6.0", "webpack-dev-server": "^2.9.1"}}Copy the code

It is easy to understand the meaning of the double parentheses in package.json.

Are you tempted to write a template of your own? Or want to build your own command line scaffolding tool? The principle is very simple, as long as the idea of step by step implementation can be.

Afterword.

In fact, two scaffolding articles were written earlier last year:

  • “How to build a front-end scaffolding tool from scratch”
  • SCION has been upgraded to be a great project starter tool!

However, I found that many students still have some deviation in their understanding of VUe-CLI, so I wrote this article to talk about my understanding.

By the Way, I will be holding a live talk on November 16th at 8:00 PM at Segmentfault, the theme is “[Front-end Engineering] : Playing with Webpack Configuration”, welcome those who are interested to sign up for it, and ensure careful preparation and full of good stuff!

Registration link: segmentfault.com/l/150000001…

Looking forward to sharing with you