In-depth understanding of vue-cli: what can be done is not only to initialize vue project

  Front end, frontend, javascript, vue-cli, vue.js

I believe for most students who have used VueJS,vue-cliIt is a tool they are very familiar with. With the help ofvue-cliThrough a very simple question-and-answer format, we can easily initiate a vue project without worrying about complicated webpack, eslint configurations, etc.

However, there are still many students who do not understandvue-cliAndVue projectThe relationship between, lead to not give full play tovue-cliThe function of. In this article, I will start from the bottom principle and combine several examples to tell youvue-cliIt can still be used like this.

What is vue-cli

A quote from vue-cli official documents:

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

After the vue-cli is installed globally, we can initialize our vue project with one command:

vue init <template-name> <project-name>

Next vue-cli will follow this<template-name>The settings inside the template throw out several question and answer options. After answering the question-and-answer options, our vue project directory has been generated. then, as long as the dependencies are installed, we can run directly. is it very convenient?

Next, we will look at what happened behind this order.

Principle of vue-cli initialization project

FromOfficial documentsAs you can see, vue-cli usesdownload-git-repoThis tool downloads the project in the remote git warehouse, if added--cloneParameter, it will run internally.git clone, pull the remote git warehouse to the local by cloning. It is essential to understand this:

Vue-cli does not generate a project from scratch, but downloads/pulls the existing project to the local to complete the project generation work.

This “existing project” is the so-called “template”.

Of course, vue-cli is not only as simple as pulling the template locally, it also allows us to personalize the template through question-and-answer format. How is this done?

Vue-cli usedinquirer.jsThe implementation of the “question and answer session” is simply like this:

//Prepare a few questions
 
 const questions = [
 {
 type: 'input',
 name: 'name',
 message: 'What's your name?  '
 },
 {
 type: 'input',
 name: 'age',
 message: 'How old are you?'  ,
 }
 ]

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`)
 })

At run time, vue-cli will put theWhat's your name?AndHow old are you?These two questions are thrown one after the other, obtaining user input and assigning the input tonameAndageVariable, so you can get the user’s input information. Then we come to the next question, how do these user inputs relate to the customization of templates?

We open a vue-cli template, such asMd in webpack-simple, it looks like this:

# {{ name }}
 
 > {{ description }}

Wrapped up with double brackets, it will eventually change to specific content according to the user’s input. Do you think this kind of writing is very familiar? In fact, it isHandlebarsThe template syntax for.

Take this README.md file as an example. In the process of vue-cli running, the contents of the file will be first read and put in memory, and then passed throughinquirer.jsGet the user input, replace the input value into the file content, and finally through another nameMetalsmith, the replaced content is output as a file, thus generating a README.md file with personalized content.

The whole process is not complicated. After we understand these principles, we can use vue-cli more deeply.

Javascript and Java, Vue-cli and Vue

Although this analogy is not very accurate, I think everyone should understand what I mean.

In short, vue-cli can not only initialize vue project, but also initialize in theory.All works, including react, angular, and so on, as long as you have a can runTemplate, you can initialize the project through vue-cli.

There are many similar problems in the discussion area:

  • “How to Configure sass in vue-cli?”
  • “How do I modify devServer’s ports in vue-cli? “
  • “Items Found in vue-cli Can’t Run”
  • ……

Vue-cli said: “I don’t carry this pot.”

Yes, the problems encountered are not vue-cli problems, but related template problems. How to write a qualified template? Let’s study it together.

Write a vue-cli template

ReferencesOfficial documents, perhaps still can’t understand exactly how to write, then we can directly refer to the official examplewebpack-simpleSee how it is written.

First you can see the directory structure:

clipboard.png

Is really very simple, among themmeta.jsonIs the question and answer question thrown to the user,/templateThe catalog is the real template content. First, let’s take a lookmeta.jsonWhat have you written?

{
 "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}}"
 }

As you can see, it asked users four questions altogether:

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

Then, we open it/templateDirectory, see what it looks like:

clipboard.png

This is the engineering catalog that will eventually be generated. Open the insidepackage.json

{
 "name": "{{ name }}",
 "description": "{{ description }}",
 "version": "1.0.0",
 "author": "{{ author }}",
 "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-template-compiler": "^2.4.4",
 "webpack": "^3.6.0",
 "webpack-dev-server": "^2.9.1"
 }
 }

It is not difficult to understand this by combining the contents of the above principles.package.jsonThe meaning of double brackets inside.

Seeing here, have you been eager to try and write a template of your own? Or do you want to build your own command-line scaffolding tool? The principle is very simple, as long as it is implemented step by step according to the idea.

Postscript

In fact, earlier last year, I already wrote two articles about scaffolding:

However, I found that many students still had some misunderstanding about vue-cli, so I wrote this article to talk about my understanding.

By the way, I will hold a live lecture at Segmentfault at 8: 00 p.m. on November 16, with the theme of “front-end engineering”: playing with Webpack configuration. interested students are welcome to sign up to attend. please make careful preparations and the dry goods are full!

Sign up link:https://segmentfault.com/l/15 …

Looking forward to sharing with you ~