node installation includes (npm/cnpm/yarn/vue)
1. Download and install node
Address: https://nodejs.org/en/download/releases
You can see previous versions, select the version you want to download and choose to download the file with the suffix .msi
I installed it on the d drive here (directly change the letter c to d when installing), and the installation path is D:\Program Files\
odejs
2. Configure node environment variables
① Configure system variables (newly added NODE_PATH)
Use the keyboard shortcut, win + r, and enter sysdm.cpl and press Enter to open the system properties interface, then click Advanced, Environment Variables
First, click New in System Variables.
Then write ==> on the variable name
NODE_PATH
Write the variable value ==>
D:\Program Files\ odejs\ ode_modules\ pm\bin
Then click OK to save
Figure 1 Create a new NODE_PATH variable in the system variables and set the value
Figure 2 The value of NODE_PATH is this directory
② Modify the path of system variables
Find the path variable in the system variables, double-click to enter the editing interface, and then click to create a new value ==>
D:\Program Files\ odejs\
Then click OK to save
Figure 3 A new value is added to the system variable path
③ Preliminary check of node configuration
Check whether node is installed, press win + r on the keyboard, enter cmd, press enter, and then enter ==>
node -v
The output result is the version of the node currently selected, v16.17.0
Figure 4 Check the currently installed node version
④ Further configure node
Create two new folders in the directory, named [node_global] and [node_cache], and enter the following two lines in the cmd window for configuration
npm config set prefix “node_global path”
npm config set cache “node_cache path”
For example mine is:
npm config set prefix "D:\Program Files\ odejs\ ode_global" npm config set cache "D:\Program Files\ odejs\ ode_cache"
Be careful not to do it backwards
Figure 5 Schematic diagram of creating two new folders
Figure 6 cmd window execution diagram
⑤ Configure the path of user variables
Find the path in the user variable, double-click to pop up the editing window, and add a value ==>
D:\Program Files\ odejs\ ode_global
Figure 7 Schematic diagram of configuring user variable path
3. Test npm and install cnpm Taobao image
Re-open the cmd window and enter ==>
npm install -g cnpm --registry=https://registry.npm.taobao.org
If an operation not permitted permission error occurs, you need to add [Full Control] permission to the current user’s nodejs folder. The operation is as follows:
(ps: If it is a company computer and does not have permissions, you need to find the person who distributed the user account and ask for help to add permissions)
Right click on the nodejs folder and select properties
Figure 8 Schematic diagram of user permission modification of nodejs folder
If there is no npm permission problem, wait for the cnpm Taobao image to be installed. After completion, there will be a cnpm folder in the D:\Program Files\
odejs\
ode_global\
ode_modules folder, which means the installation is successful.
Or reopen the cmd window and enter ==>
cnpm -v
If there is a result, the cnpm Taobao image is successfully installed.
Figure 9 cnpm version
4. Test cnpm and install yarn globally
① cmd global installation of yarn
Re-open the cmd window and enter ==>
cnpm install -g yarn
② Configure system variable path
After successful installation, find the yarn folder and copy the path
Mine is D:\Program Files\
odejs\
ode_global\
ode_modules\yarn\bin
Figure 10 Yarn’s path in node_global
Similarly, enter win + r on the keyboard and enter sysdm.cpl to open the environment variables window and add the path you just copied in the path of [System Variables]
Figure 11 Configure the system variable path and add the path of yarn
③ Further configure yarn
First, configure the yarn global installation directory and cache directory.
Similarly, add two new folders in the nodejs folder, named [yarn_global] and [yarn_cache], and enter the following two lines in the cmd window for configuration
yarn config set global-folder “yarn_global path”
yarn config set cache-folder “\yarn_cache path”
For example mine is:
yarn config set global-folder "D:\Program Files\ odejs\yarn_global" yarn config set cache-folder "D:\Program Files\ odejs\yarn_cache"
Be careful not to do it backwards
Figure 12 Schematic diagram of creating two new folders
Secondly, in the cmd window, set the yarn configuration to Taobao mirror source, enter ==>
yarn config set registry https://registry.npm.taobao.org
④ Check yarn configuration
You can view the yarn image source in the cmd window and enter ==>
yarn config get registry
Or you can use Notepad to open the .yarnrc file in the current user’s directory to view the yarn configuration, as shown in the following figure:
Figure 13 cmd window execution diagram
Figure 14 Check whether the yarn configuration is set successfully
4. Test yarn and install vue globally
Create a folder and enter the command in the folder ==>
yarn global add @vue/cli
Wait for installation. After the vue scaffolding is installed, enter and copy the path result.
yarn global bin
Figure 15 Schematic diagram of command window
Similarly, enter win + r on the keyboard and enter sysdm.cpl to open the environment variables window and add the path you just copied in the path of [System Variables]
Figure 16 Configure the system variable path and add the path of yarn
At this time, re-open the command window. If you use vscode, close it and reopen it. Enter ==>
vue
The results will be displayed,
At this point you can create a vue2 or vue3 project for front-end development.