Vue building project (pro-test, absolutely practical) with webstorm

Premise: Installed webstorm, here mainly about building, webstorm download not here to say.

1, learning the basics of
1.1, Node.js:
Node.js is based on a
JavaScript runtime environment Chrome V8 engine.
Node.js uses an event-driven, non-blocking I / O model, making it lightweight and efficient.

Node.js package manager npm, the world's largest repository of open source ecosystem.

nodejs Versions Query: node -v

1.2, npm:
npm called the Node Package Manager, is based on Node.js package manager, but also the entire community of the most popular Node.js, supported by most third-party modules package manager (similar to java in Maven).

npm mind: JavaScript developers to more easily share and reuse code.

npm usage scenarios:
allows users to access and use third-party packages.
It allows users to package or command-line program written to publish their own share.

npm Versions Query: npm -v

1.3, Webpack
WebPack packer module can be seen: it to do is analyze your project structure, expand find language (Scss, TypeScript, etc.) JavaScript modules as well as some other browsers can not run directly, and convert and packaging for the browser to the appropriate format.

2, download Node.js (comes npm)
to open the official website to download link: https: //nodejs.org/en/download/

3, in the installation path nodejs, two new node_global node_cache and folders, as shown below:

4, provided nodejs prefix (global) and Cache (Cache) path
win + R, type cmd

Set cache folder
npm config set cache "D: \ vueProject \ nodejs \ node_cache"

Set global module storage path
npm config set prefix "D: \ vueProject \ nodejs \ node_global"

5, set the environment variable
5.1, the system variable

path:

5.2, user variables

6, the test

7, Taobao installation image (similar to Ali cloud maven central repository mirroring)

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

Verify command: cnpm -v

8, installation webpack

Command-line statement to cnpm install webpack -g

9, installation Vue
CNPM install VUE -g

10, a command-line tool mounting vue, i.e. vue-cli scaffolding
cnpm install vue-cli -g

11, detects whether the installation was successful

11.1, if webpack -v appear

We will use "npm" to install the CLI via "npm install -D".
Do you want to install 'webpack-cli' (yes/no):
不用管 直接回车 然后执行
此命令npm install webpack-cli -g

11.2, vue -V (uppercase)

12, download and install git (create webStorm Vue need to use, or will be error)
official website: https: //git-scm.com/
three parties: https: //pc.qq.com/detail/13/detail_22693.html
no way when I downloaded, the official website does not know is the Editor's Note, the three parties are okay friends.

13, using webstorm create vue

Open webStorm (I use a version 2019.1)











the OK, using webstorm vue build this project came to an end ~ ~ ~