npm Installation tutorial

One 、 Before use , Let's master it first 3 What is this thing for .

npm: Nodejs Package manager under .

webpack: Its main use is through CommonJS All static resources that need to be published on the browser side should be prepared according to the syntax of , Such as resource merging and packaging .

vue-cli: User generated Vue Engineering formwork .（ Help you to start one quickly vue Project , That is to give you a set vue Structure , Include base dependency Library , It only needs npm install Can be installed ）

Start ：

 

Pictured , download 8.9.3 LTS （ Recommended for most users ）

Double click installation

 

You can use the default path , In this example, it is changed to d:\nodejs

All the way Next

 

spot Finish complete

open CMD, Check whether it is normal

 

Look at the other 2 A catalog ,npm The local warehouse runs in the system disk c Disk's user directory ( I didn't see npm-cache It's because I haven't used it , As soon as the cache directory is used ), We're trying to put this 2 Move directories back to D:\nodejs

First set up as shown in the figure below 2 A catalog

 

Then run the following 2 Bar command

npm config set prefix "D:\nodejs\node_global"

npm config set cache "D:\nodejs\node_cache"

Pictured above , Let's focus on npm Local warehouse of , Enter the command npm list -global

Enter the command npm config set registry=http://registry.npm.taobao.org Configure mirror station

Enter the command npm config list Show all configuration information , We focus on a profile

C:\Users\Administrator\.npmrc

Edit it with a text editor , You can see the configuration information just now

Check if the mirror station works 1

npm config get registry

Check if the mirror station works 2

Npm info vue See if you can get vue Information about

 

Be careful , here , Default module D:\nodejs\node_modules Catalog

Will change to D:\nodejs\node_global\node_modules Catalog ,

If it runs directly npm install You'll get an error when you wait for an order .

We need to do 1 thing ：

1、 Add environment variables NODE_PATH The content is ：D:\nodejs\node_global\node_modules

 

 

 

（ Be careful , The next operation needs to be reopened CMD Let the environment variables above take effect ）

One 、 test NPM install vue.js

command ：npm install vue -g

there -g Means to install to global Global directory to

 

Two 、 test NPM install vue-router

command ：npm install vue-router -g

 

 

function npm install vue-cli -g install vue The scaffold

 

 

 

Editor environment editor path

Yes path Environment variable add D:\nodejs\node_global

win10 The following versions of , Horizontal display PATH Of , Note when adding to the last , No semicolons 【;】

 

Reopen CMD, And test it vue Whether it is in normal use

Be careful ,vue-cli Tools are built-in templates including webpack and webpack-simple, The former is a more complex professional project ,

His configuration is not all in the root directory webpack.config.js in .

 

initialization , Installation dependency

function npm install Installation dependency

npm run dev

Success interface , Prompt open address http://localhost:8080

 

Open browser automatically http://localhost:8080/#/

npm run build

Generating static files , open dist New created under folder index.html file

 

 

nmp Next new vue01 Directory description for ：