VUE-CLI Rapid Scaffolding Construction

When you use Vue.js to develop large applications, we need to consider things like code directory structure, project build and deployment, unloading, code unit testing, and so on. If each project has to do this manually, it's certainly inefficient, so we usually use scaffolding tools to help with these things. In the Vue.js ecosystem we can use VUE-CLI scaffolding tools to quickly build projects.

1. Installation

VUE-CLI is a command-line tool written with node, and we need to do a global installation. Open the Command line tool and enter the instructions:

$ NPM install-g vue-cli

Note: Make sure that node version is 4.x, 5.x, and above

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8B/03/wKioL1hCLlCgniIEAAAnYzrpmgc909.png "title=" Qq20161203101630.png "alt=" Wkiol1hcllcgniieaaanyzrpmgc909.png "/>

After the installation is complete, execute the following command:

$ vue--version

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/8B/07/wKiom1hCLpCAkLGIAAAFEB-7Pzo016.png "title=" Qq20161203101613.png "alt=" Wkiom1hclpcaklgiaaafeb-7pzo016.png "/>

2. Basic use

The command format for building the project template is

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

<template-name> : template name, such as Webpack, simple, browserify

<project-name> : Local folder name

we can use VUE-CLI to quickly build a project based on the Webpack build. Open the Command line tool and enter the following command:

$ vue init webpack My-project

All templates are installed with the Vue 2.x version by default, and if you need to install a 1.x version, you need to enter the following instructions:

$ vue init webpack#1.0 My-project

Here first installs the 1.0 version, and has a series of interactive questions, agrees to press Y, does not agree to press N

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/8B/03/wKioL1hCMFDiwoX9AAAn6R4TLtY768.png "title=" Qq20161203103823.png "alt=" Wkiol1hcmfdiwox9aaan6r4tlty768.png "/>

To install the prompt given by the command line, we enter the following instructions in turn:

$ CD My-project

$ CNPM Install

After installation, the following files will be generated in the corresponding directory:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/8B/03/wKioL1hCMgbT3fzXAAAn6R4TLtY531.png "title=" Qq20161203103823.png "alt=" Wkiol1hcmgbt3fzxaaan6r4tlty531.png "/>

650) this.width=650; "src=" Http://s2.51cto.com/wyfs02/M01/8B/07/wKiom1hCNK3Ctm6KAABxYA_0SIg262.png "title=" Qq20161203105723.png "alt=" Wkiom1hcnk3ctm6kaabxya_0sig262.png "/>

650) this.width=650; "src=" Http://s1.51cto.com/wyfs02/M00/8B/07/wKiom1hCMhOy0RyJAACdVJEPRcQ663.png "title=" Qq20161203104213.png "alt=" Wkiom1hcmhoy0ryjaacdvjeprcq663.png "/>

Here is a brief description of the directory

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M00/8B/07/wKiom1hCNEmBut2LAACdJkXPepU454.png "title=" Qq20161203105553.png "alt=" Wkiom1hcnembut2laacdjkxpepu454.png "/>

Now start the project and enter the following command:

$ npm Run Dev

The default listener is port 8080.

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/8B/07/wKiom1hCNQ6QFQ4wAAArhpaXUag036.png "title=" Qq20161203105846.png "alt=" Wkiom1hcnq6qfq4waaarhpaxuag036.png "/>

Even the Apche server does not need to start itself, enter http://localhost:8080 in the browser, the resulting page is as follows:

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M02/8B/04/wKioL1hCNXKzMSM8AAEI55dOsQ4437.png "title=" Qq20161203105956.png "alt=" Wkiol1hcnxkzmsm8aaei55dosq4437.png "/>

Next we open the Src/components/hello.vue and change the MSG in the data to "Hello, world!" ”

<script>export default {data () {return {//note:changing this line won ' t causes changes//with H Ot-reload because the reloaded component//preserves its current state and we is modifying//its initial stat    E. Msg: ' Hello, world! ' }}}</script>

Re-refresh the page:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/8B/08/wKiom1hCNk6zaZsTAAChdpMt6Yg955.png "title=" Qq20161203110216.png "alt=" Wkiom1hcnk6zazstaachdpmt6yg955.png "/>

3. Templates

Here is an introduction to the further expansion of the two commands:

3-1. Init

The init command is used to generate the project structure based on the specified template. As mentioned earlier, Template-name is the template name, Project-name is the name of the directory to be generated

3-2. List

The list command lists all available templates, which can be obtained by querying Https://api.github.com/users/vuejs-templates/repos the API interface.

command line Input directives:

$ vue List

650) this.width=650; "src=" Http://s5.51cto.com/wyfs02/M01/8B/08/wKiom1hCOqSQ7gjiAAAoMFIdVoE145.png "title=" Qq20161203112256.png "alt=" Wkiom1hcoqsq7gjiaaaomfidvoe145.png "/>

As mentioned earlier, you can specify the name of the template when you execute the init command. By default, VUE-CLI will go to GitHub to find the template based on the name of the template that was passed in.

VUE-CLI templates are divided into official templates, custom templates, local templates

(1), official template

5 Types of official templates are available:

• browserify -browserify + vueify with advanced features for formal development

• browserify-simple -browserify + vueify with basic functionality for rapid development

• Simple-single HTML for developing the simplest vue.js applications

• Webpack -Webpack + Vue-loader with advanced features for formal development

• webpack-simple -webpack + Vue-loader with basic functionality for rapid development
  

Here's a special mention of Webpack, before installing the Webpack template, there is a selection, whether to use ESLint to standardize your code

650) this.width=650; "src=" Http://s4.51cto.com/wyfs02/M01/8B/08/wKiom1hCQbXzhQ-OAAADLiFcV90256.png "title=" Qq20161203115247.png "alt=" Wkiom1hcqbxzhq-oaaadlifcv90256.png "/>

ESLint for people who don't pay much attention to the code indentation may be a sad news, we briefly demonstrate, open SRC under the App.vue, the code slightly modified

<template> <div id= "app" >

Refresh the page, prompting for various code indentation, whitespace and other errors
650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/8B/08/wKiom1hCSg6xD8-SAAG3idY3GKI766.png "title=" Qq20161203122841.png "alt=" Wkiom1hcsg6xd8-saag3idy3gki766.png "/>

(2), custom templates
When the official template does not meet the requirements, we can fork the official template according to its own needs, and then generate a project structure based on its own template with the VUE-CLI command:
$ vue init Username/repo My-project


(3), local templates
In addition to downloading templates from GitHub, we can also load templates locally:
$ vue init ~/fs/path/to-custom-template My-project



4. Recommended Toolkit
VUE-CLI internal uses a number of third-party NPM packages to help you implement some basic functions, such as the following

4-1, Commander
Commander is a command-line interface solution that provides interfaces that allow us to parse command-line commands.

Warehouse Address: Https://github.com/tj/commander.js


4-2, Download-git-repo
Download-git-repo is used to download the appropriate Git libraries (Github, GitLab, BitBucket) to the specified local folder.

Warehouse Address: Https://github.com/flipxfx/download-git-repo

4-3, Inquirer
Inquirer is a common collection of interactive command-line user pages that simplifies the following processes:

 
 

  
  
 
   
Provide error feedback
 
   
Ask questions
 
   
Parse input
 
   
Validation results
 
  
 
 

Warehouse Address: Https://github.com/SBoudrias/Inquirer.js


This article is from the "Dapengtalk" blog, make sure to keep this source http://dapengtalk.blog.51cto.com/11549574/1879088
VUE-CLI Rapid Scaffolding Construction