npm, Vue scaffolding installation tutorial

1. Download node.js

Node.js official website link: https://nodejs.org/en/

It is recommended to download the version surrounded by the red box

2. Install node.js

1) Double-click to open the node.js installation package

2) Always select next after opening

insert image description here

3) You can modify the default path under this page

insert image description here
This note selects "E:\node.js"

4) Select "install" on this page

insert image description here

5) Click "Finish" to complete the installation

insert image description here

6) Check whether the file exists in the installation directory

insert image description here

node_modules: modules
node.exe: node.js program
npm.cmd: package manager

7) Check if there is a node in cmd

After opening cmd, enter in cmdnode-v

insert image description here
Node comes with npm, but it is not the latest version of npm, you can enter npm-vto view the npm version

3. Modify the npm local warehouse directory

The local warehouse of npm is installed under the user directory of the system c disk by default, and these two directories must be moved to the installation directory.

insert image description here

1) Create a directory as shown in the figure under E:\node.js

insert image description here

2) Run the following two commands in cmd

npm config set prefix "E:\node.js\node_global"
npm config set cache "E:\node.js\node_cache"

3) View npm's local warehouse in cmd

npm list -global

At this point the directory has been changed to the E drive

insert image description here

4) Configure mirroring in cmd

npm config set registry=http://registry.npm.taobao.org

You can enter the following command to view all configuration information

npm config list

insert image description here

5) Check whether the image can be executed

Enter the following command in cmd

npm config get registry

npm info vue

insert image description here

4. Upgrade npm

1) Enter the command in cmd`npm install npm -g`

After the installation is complete, enter npm -vto check whether the version has been updated

insert image description here

npm install: install or update command
npm: module name
-g: install to the "E:\node.js\node_global" directory,

Use npm list -globalto see what modules are under global

insert image description here
The global directory is not empty at this time

2) If you run npm install and report an error, configure the environment variables (you can ignore this step if you don’t report an error)

Right-click on "This PC" and select " Properties ". After entering, the left menu bar is as shown in the figure below

insert image description here
Select " Advanced System Settings " to display the following image

insert image description here
Select "Environment Variables" and add environment variables in " System Variables " in the environment variables

insert image description here

After all the operations are confirmed, cmd must be restarted so that the newly configured environment variables can take effect

5. Test npm

Install Vue.js

Enter the command in cmdnpm install vue -g

E:\node.js\node_global\node_modulesCheck if there is a vue file below

6. Install Vue scaffolding

Enter the command in cmdnpm install -g @vue/cli

insert image description here
Enter the command in cmd vue -Vto view the vue scaffolding version

Note: When using the vue command 'Vue'不是内部或外部命令，也不是可运行的程序或批处理文件, the prompt is because the vue scaffolding version is in the custom global directory, not in the environment variable path.

For the above prompts, configure the environment variables

Find "Environment Variables" (steps are given in 4.2)

Find Path in "System Variables"

insert image description here
Double-click "Path", add E:\node.js\node_global

insert image description here
Do not add a semicolon at the end

7. Test Vue

Switch to the E drive (must be the root directory)

insert image description here

According to the prompt, enter the following command

cd vue01
npm install -g

insert image description here
Initialize, install dependenciesnpm run dev

will automatically open the browserhttp://localhost:8080/#/

The above installation has been completed --------------------------------------------- ----------------

8. Use vue ui to open the page (you can choose according to your needs)

Personally, I prefer to open the page in the integrated terminal in VS Code

When used in the integrated terminal vue ui, the browser will be opened automatically under normal conditions

The following are special cases:

1) Prompt "running scripts is prohibited on this system"

insert image description here

Solution:

Enter in the terminal get-ExecutionPolicy, and the execution policy is displayed at this time Restricted, indicating that scripts are prohibited on this system.

Enter set-ExecutionPolicy RemoteSigned, set the execution policy to RemoteSigned.

Execute again get-ExecutionPolicy, display RemoteSigned, and the script command can be used normally vue ui.

If there is the following warning when modifying in the second step:

insert image description here
According to the prompt, enter the commandset-ExecutionPolicy -Scope CurrentUser

insert image description here
RemoteSignedChange it to ExecutionPolicy

2) No error is reported when inputting vue ui, and the visualization page is not opened

Entering in the terminal vue uidoes not open the visualization page

The vue ui command is only available in vue3.x and above

Solution:

Use npm uninstall vue-cli -gto delete the existing vue
to use npm install -g @vue/cliand re-download