Install and use NVM and Node

1. What is NVM?

Node.js Version Management (NVM) is a nodeJS version management tool. It allows you to install and switch between different versions of Node.

2. In Windows, download the NVM, install the NVM, and install node and NPM

2.1 download the NVM

The latest version can be downloaded here on Github, and there are two versions available:

  • Nvm-noinstall. zip: green installation-free version, which requires configuration and is not recommended.
  • Nvm-setup. zip: installation version, recommended

2.2 installation NVM

A. Double-click NVM-setup. exe and install it as prompted

B. Select the NVM installation path

C. Select the nodejs path

D. Confirm the installation

E. Confirm the installation

Open CMD and enter the command NVM. If the installation is successful, the following information is displayed: You can see that the various commands are listed, and their Chinese illustrations are listed later.

2.3 Installing and managing Node.js

1. View the versions of all nodes installed locally. The optional parameter available displays all downloadable versions.

nvm list [available]
Copy the code

2. You can customize the version number in the command. For details, see command 1

NVM install 15.0.1Copy the code

3. Use a specific version

NVM use 15.0.1Copy the code

Check whether the installation is successful

node --version

npm --version
Copy the code

4. Uninstall a specific version

NVM uninstall 15.0.1Copy the code

2.4 pay attention to

This section describes how to install and use the Node. js version management tool NVM. It is recommended that the installation path do not contain Chinese characters and Spaces.

3. For the Mac system, download the NVM, install the NVM, and install node and NPM

3.1 installation NVM

This paper mainly introduces the installation and problems of NVM on Mac.

Note:

1. Do not install NVM using Homebrew. This is explained in the official documentation for NVM.

2. About.bash_profile. If you don’t have one in the user’s home directory, create a new one. You don’t need to write the following two lines of code, because they will be written into the.bash_profile automatically when you run the install command.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
Copy the code

I found a lot of articles on the network are that the following two sentences are written manually before installation, after testing is not correct, and will cause the installation is not successful, this point needs to pay attention to.

export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
Copy the code

3. Make sure you have Git installed on your Mac. Usually, once you download the Mac Xcode development tool, it comes with Git.

The specific steps are as follows:

First, open the terminal and go to the current user’s home directory.

cd ~
Copy the code

Then use ls -a to display all files (folders) in this directory (including hidden files and folders) and check for.bash_profile.

ls -a
Copy the code

If no, create a new one.

touch ~/.bash_profile
Copy the code

If so, or after a new one is created, we install it by running one of the following commands in the terminal according to the official instructions

The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bashCopy the code

After the installation is complete, close and restart the terminal, and typing NVM will bring up the NVM help documentation, indicating that your installation was successful.

Also, install NVM on the latest Catalina system

Note that the latest macOS Catalina operating system (version 10.15 and later) default shell is ZSH, not bash, and the command may be unavailable after installation.

There are two solutions:

In the first case, we need to change the default shell to bash. See how to change the default shell on the Apple website. If you are already using ZSH, you can also configure it yourself.

Second, if you want to use ZSH terminal, after installing the above method, create a.zshrc file in the same directory as.bash_profile, open the file with vim, add the following two sentences, and restart the terminal.

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
Copy the code

3.2 Common Commands

NVM –version: Displays the NVM version. –version can be simplified to -v.

NVM ls-remote lists all installable versions

NVM LS lists all installed versions

NVM install

Installs the specified version, such as NVM install v8.14.0

NVM uninstall

Uninstalls the specified version

NVM use

Switch to use the specified version

NVM current Displays the version currently in use

NVM alias default

Sets the default Node version

NVM deactivate unbinds the current version

NVM on turns on the NodeJS control

NVM off Disables nodeJS control

Package management tools

  • cnpm

    npm install -g cnpm –registry=registry.npm.taobao.org

  • yarn

    npm i -g -yarn

Check whether the installation is successful

yarn --vresion
Copy the code

Install dependencies

yarn global add @vue/cli
Copy the code

Iii. VsCode installation and plug-in installation

VsCode is currently the preferred development tool of most front-end practitioners. Here are a few plug-ins commonly used in development

  • Chinese (Simplified) Language Pack for Visual Studio Code

The Chinese (Simplified) language pack provides a localization interface for VS Code.

  • Auto Close Tag

Automatically add HTML/XML closing tags.

  • Auto Rename Tag

Automatically renames paired HTML/XML tags, just like the Visual Studio IDE.

  • Beautify

Beautify the code, make the code more visible, and make the hierarchy more detailed

  • Bracket Pair Colorizer

This extension allows matching brackets with color recognition. The user can define the characters to match and the colors to use.

  • ESLint

The extension uses the ESLint library installed in the open Workspace folder

  • GitLens — Git supercharged

Git requires you to view logs when collaborating with others. If you can view logs in the current code, it is very convenient. You can save a lot of time to view logs in other tools and improve work efficiency.

4. Git installation

Download address of the installation package on the official website If you visit the official website slowly, use the download address of the image in China

The configuration and installation process can be viewed in Git Installation and Configuration for beginners

Five. Browser installation

Google browser, IE browser and other installation: download the official website to install

Google Chrome benefits:

1) Simple browser with high performance.

3) Chrome’s plugin system is very powerful, if you do not understand the most cool place of Chrome, a variety of auxiliary tools, advertising blocking, development tools and so on

4) Better debugging experience