From 0 to 1, build Vue single page application

Time:2020-2-11

Restart and complete the Vue project independently

Preparation

Node.js, Vue official document, ES6

Project construction

Use the official scaffold (Vue CLI) provided by Vue directly, so the first step is to install the scaffold. You can install automatically by entering the following command on the command line or in the terminal window of webstorm:

NPM I - G Vue cli (after global installation, it can be used directly next time, and does not need to be installed again)

After installation, initialize the directory of the application

Vue init webpack app (app is the root directory of the project)

After entering, there are several initialization options you need to select:

  1. Project name, description, author, just press enter
  2. The Vue build option, which is related to configuration, can be entered directly
  3. Whether to install Vue router is generally used later, so it is recommended to enter y
  4. Grammar check, unit test, project test, input according to your own needs
  5. Whether to NPM install after project creation, select Yes

From 0 to 1, build Vue single page application

After you enter, the project structure and various dependent files are automatically generated.

(the implementation idea is: Vue init webback app – > webback template – > template engine – > local project (you can update the template here, that is, start your own project))

Enter NPM init – y initialization project after downloading
After that, enter NPM run dev to run the project. After a while, you will get the URL. You can open the initial page in the browser.

From 0 to 1, build Vue single page application

Here, a basic single page application is even created.