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

This article mainly explains "how to build scaffolding in Vue2.0". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to build scaffolding in Vue2.0.

First, install node.js1 and enter the official website https://nodejs.org/en/download/

According to the computer operating system, select the corresponding version of the file to download.

2. Double-click to install after downloading the file

After the installation is completed, enter the node.js installation directory: d:\ Program Files\ nodejs\ (here is my local installation directory, other machine directories may be different), you will find that it comes with npm, you can directly use the npm installation environment.

Second, install cnpm

Note: npm (node package manager) is node.js 's package manager for node plug-in management (including installation, uninstallation, managing dependencies, etc.).

Use npm to install the plug-in: execute npm install at the command prompt.

Choose cnpm. Because the npm installation plug-in is downloaded from a foreign server, which is greatly affected by the network, there may be an exception, if only the npm server is in China, so the Taobao team we are happy to share did it. From the official website: "this is a complete npmjs.org image, which you can use instead of the official version (read-only). The synchronization frequency is currently 10 minutes, so try to keep up with the official service." ;

Installation command: npm install-g cnpm-- registry= https://registry.npm.taobao.org.

View version: enter cnpm-v to view the current version of cnpm.

Note: cnpm is not installed in the place where node.js is installed, but under the project directory you created.

Third, install vue-cli scaffolding construction tools

Vue-cli provides an official command-line tool that can be used to quickly build large single-page applications. This tool provides out-of-the-box configuration of build tools, leading to a modern front-end development process. It takes only a few minutes to create and start a project with hot overloads, static checks on save, and a build configuration that can be used to build the environment.

1. Installation command

Command: $cnpm install vue-cli-g. As shown in the following figure:

Note: G means global installation.

The following interface indicates that the installation is complete:

2. Check whether the installation is successful

After the installation is complete, type vue-V (note that this is an uppercase "V"). As shown in the following figure, if the corresponding version number appears, the installation is successful.

Create a new project based on the webpack template

To create a project, we first select the directory, and then change the directory to the selected directory on the command line. You can use the following command:

$vue init webpack my-app

Note: my-app is a custom project name, which cannot contain uppercase letters.

Press enter directly after entering the command:

Running the initialization command allows the user to enter several basic options, such as project name, description, author, and so on. For example:

Project name (myvuedemo): the name of the project, here is myvuedemo.

Project description (A Vue.js project): project description, here is "my first Vue project".

Author: author.

Install vue-router? (y Vue N): whether or not to install Vue routing, that is, later spa (but the module that the page should need).

Use ESLint to lint your code? (YUnip N): use ESLint to your code.

Pick an ESLint preset (Use arrow keys): select a preset ESLint (use the arrow keys).

Set up unit tests (YBO) y: set up a unit test.

Setup e2e tests with Nightwatch? (YBO): set up end-to-end tests.

Fifth, run the project

Enter the following command: $cnpm run dev.

After running successfully, according to the prompts, enter the http://localhost:8080, browser in the browser to display the following page:

Note: after the service is started, it cannot be shut down.

At this point, I believe you have a deeper understanding of "how to build scaffolding in Vue2.0". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.