npm installation - detailed tutorial

npm installation tutorial

The use of Node.js in the first chapter of Vue learning introduction

---

Preface

With the continuous development of the times, the technology of front-end learning is becoming more and more important. Many people have started learning front-end learning. This article introduces the basic content of front-end learning-npm installation.

---

1. What is npm?

npm is the package manager under NodeJS, and the vue-cli scaffolding template is installed based on npm under node.

Related introduction ~
webpack: Its main purpose is to prepare all static resources that need to be published on the browser side through CommonJS syntax, such as merging and packaging resources.
vue-cli: An officially provided scaffolding for quickly generating a Vue project template.

2. Install and configure environment variables

1. Download and install NodeJS

NodeJS installation under windows is relatively convenient (after version v0.6.0, windows native is supported). You only need to directly visit the official website ( https://nodejs.cn/download/ ). Here we can choose the Windows installation package (.msi) - 64 bit for installation.

Or go directly to the official website http://nodejs.org/

• The installation process basically just " NEXT " all the way until Finished.
  
  
  
  Under Windows, the path system variable will be added directly during the installation of the msi file. The variable value is your installation path, such as "D:\RunSoftware\nodejs"

• Confirm that the nodejs installation is successful:
  shortcut key win+R —> enter the cmd command line, enter the dos window: enter node -v, and check whether the version number can be printed correctly!
  
  Node comes with npm, enter it npm -vand see if the version number can be printed correctly!
  

2. npm configuration

npm is a NodeJS module management. We can first configure the storage path of npm's global module and the cache path .
(1) Create 2 directories node_cache and node_global .
If you want to place these two folders in the main directory of NodeJS, create two folders "node_global" and "node_cache" under NodeJs. As follows:

(2) Configure

npm config set prefix "D:\RunSoftware\nodejs\node_global"
npm config set cache "D:\RunSoftware\nodejs\node_cache"

If you do not set this step, npm's global installation package will not be in the node installation folder.
If an error occurs in this step, such as: operation not permitted, mkdir 'D:\RunSoftware\nodejs', please open the cmd command line as an administrator.
Here we can see:

(3) Configure environment variables
. Enter the environment variables dialog box, create a new " NODE_PATH " under system variables , and enter "D:\RunSoftware\nodejs\node_global\node_modules".

Since the default address of the module has been changed, the above user variables must be changed accordingly (the user variable "PATH" is changed to "D:\RunSoftware\nodejs\node_global\") , otherwise when using the module, the input command will cause " xxx is not recognized as an internal or external command, operable program or batch file" error.

(4) Install Node.js Taobao Image Accelerator (cnpm). In this way, the download will be much faster~

• Configure the mirror station:npm config set registry=https://registry.npm.taobao.org
  
  

• Check if the mirror site is OK:npm config get registry
  

• Next, enter the command: npm install -g cnpm --registry=https://registry.npm.taobao.org
  
  Or enter the following command:

# -g 就是全局安装
npm install cnpm -g
# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org

• Add the content of the system variable path :
  　　because cnpm will be installed under D:\RunSoftware\nodejs\node_global, and the system variable path does not contain this path. So after we add the path under the system variable path , we can use cnpm normally.
  　　
• Then, enter the command: cnpm -vto view the result.
  
  The installation process may be a bit slow, so be patient! Although cnpm is installed, try to use it sparingly !
  The installation location is as follows:
  
  At this point, our npm installation has ended successfully! The above is what I will talk about today. This article only briefly introduces the installation of npm. There is more knowledge waiting for us to explore!
  Now, we can start the vue-cli learning journey~ Friends, you can read my other article vue-cli detailed tutorial , I hope it will be helpful to all of you~