Detailed explanation of node.js installation and HbuilderX configuration

npm installation tutorial:

1. Download the Node.js installation package

Official website: https://nodejs.org/en/

2. Before using, let's first understand what these three things are used for.

webpack: Its main purpose is to prepare all static resources that need to be released on the browser side through CommonJS syntax, such as merging and packaging resources.

vue-cli: User-generated Vue project template. (Help you quickly start a Vue project, that is, give you a set of Vue structures, including basic dependency libraries, which can be installed with just npm install)

As shown in the figure, the version downloaded now is 14.16.0 LTS (recommended for users now):

Double-click to install

1. First, we can see that the default path is C drive. Here we take D drive as an example for installation: d:\node.js

Click Next all the way

Click Finish

Next we win + r shortcut key

We enter echo %PATH%

We enter node -v and npm -v

Let's take a look at C:\Users\Administrator\AppData\Roaming

We can see that npm's local repository is running in the user directory of the system disk C drive (npm-cache is not seen because it has not been used. The cache directory is generated as soon as it is used). We try to move these two directories back to D:\nodejs

First create two directories as shown below

Then run the following 2 commands

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

As shown below, let's take a look at the local repository of npm and enter the command npm list -global

Enter the command npm config set registry=http://registry.npm.taobao.org to configure the mirror site

Enter the command npm config list to display all configuration information. Let’s focus on one configuration file.

C:\Users\Administrator.npmrc

Using txt text or a text editor, we can see the configuration information just now:

Check if the mirror station works. Command 1

npm config get registry 

Check if the mirror station is OK Command 2
Npm info vue to see if you can get information about vue

Note that at this time, the default module D:\nodejs\node_modules directory will be changed to D:\nodejs\node_global\node_modules directory.
If you run commands such as npm install directly, an error will be reported.
We need to do 1 thing:
1. Add the environment variable NODE_PATH. The content is: D:\nodejs\node_global\node_modules

(Note that the following operations require you to reopen CMD for the above environment variables to take effect)

1. Test NPM installation of vue.js

Command: npm install vue -g
The -g here means installing to the global directory

Let's take a look: D:\nodejs\node_global\node_modules\vue

2. Test NPM installation of vue-router

Command: npm install vue-router -g

Run npm install vue-cli -g to install the Vue scaffolding

Add D:\nodejs\node_global to the path environment variable
For versions below Windows 10, the PATH is displayed horizontally. Please note that there should be no semicolon [;] when adding it to the end.

Reopen CMD and test whether Vue is working properly

Note that the vue-cli tool has built-in templates including webpack and webpack-simple. The former is for more complex and professional projects.
His configuration is not all placed in webpack.config.js in the root directory.

Initialization, installation dependencies:
When installing, select install vue-router? Yes and all others are No

Run npm install to install dependencies

Run npm run dev
Enter npm run dev in the dos command

Open http://localhost:8080 in your browser as prompted.

Automatically open the browser http://localhost:8080/#/

Enter in the DOS command: npm run build

Generate static files and open the newly generated index.html file in the dist folder

Next, we will use the Hbuilderx tool to configure Node.js and npm

Official website: https://www.dcloud.io/hbuilderx.htmlHubilderX link

Enter npm run dev in the terminal to run the project

This is the end of this article about node.js installation and HbuilderX configuration. For more relevant node.js HbuilderX configuration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!