Shulou(Shulou.com)06/02 Report--

Editor to share with you how to quickly build scaffolding vue-cli, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

1. Installation

Vue-cli is a command line tool written in node, and we need to install it globally. Open the command line tool and enter instructions:

$npm install-g vue-cli

Note: please make sure that the node version is 4.x, 5.x or above

After the installation is complete, execute the following command:

$vue-version

2. Basic use

The command format for generating the project template is

$vue init

Template name, such as webpack, simple, browserify

: local folder name

We can use vue-cli to quickly generate a project built on Webpack. Open the command line tool and enter the following command:

$vue init webpack my-project

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

$vue init webpack#1.0 my-project

First install version 1.0 here, and there are a series of interactive problems, agree to press y, do not agree to press n

To install the prompts given on the command line, we enter the following instructions in turn:

$cd my-project

$cnpm install

After installation, the following files are generated in the corresponding directory:

The following is a brief description of the directory above.

Now start the project and enter the following command:

$npm run dev

The default listening is port 8080.

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

Next, we open src/components/Hello.vue and change the msg in the data to "Hello, World!"

Export default {data () {return {/ / note: changing this line won't causes changes / / with hot-reload because the reloaded component / / preserves its current state and we are modifying / / its initial state. Msg: 'Hello, World!'}

Refresh the page:

3. Template

Here is a further extension of 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 and project-name is the directory name to be generated

3-2, list

The list command is used to list all available templates, and you can get all the lists by querying the API interface https://api.github.com/users/vuejs-templates/repos.

Enter instructions on the command line:

$vue list

As mentioned earlier, you can specify the name of the template when you execute the init command. By default, vue-cli looks up the template in github based on the name passed in.

Vue-cli templates are divided into official templates, custom templates and local templates.

(1) official template

Five official templates are provided in the figure above:

Browserify-Browserify + vueify with advanced features for formal development

Browserify-simple-Browserify + vueify with basic functions for rapid development

Simple-A 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 functions for rapid development

Here is a special mention of webpack. When installing the webpack template, there is an option whether to use ESLint to regulate your code.

ESLint may be bad news for friends who don't pay much attention to code indentation. Let's briefly demonstrate that we can open App.vue under src and modify the code slightly.

2017 is coming! `msg` export default {data () {return {msg:' learn Vue.jswatches' }}}

Refresh the page, prompting various errors such as code indentation, spaces, and so on

(2) Custom template

When the official template cannot meet the requirements, we can fork the official template to modify it according to our own needs, and then generate the project structure based on our own template through vue-cli command:

$vue init username/repo my-project

(3), local template

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 uses many third-party npm packages internally to help it implement some basic functions, such as the following

4-1, commander

Commander is a solution of command-line interface, which provides some interfaces for 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 corresponding 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

Verification result

Warehouse address: https://github.com/SBoudrias/Inquirer.js

These are all the contents of the article "how to quickly build scaffolding in vue-cli". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.