腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

node.js安裝及HbuilderX配置詳解

更新時(shí)間：2021年03月12日 09:45:08 作者：小東子এ

這篇文章主要介紹了node.js安裝及HbuilderX配置的相關(guān)資料,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

npm安裝教程：

一.下載Node.js安裝包

官網(wǎng)：https://nodejs.org/en/

二.使用之前，我們先來(lái)掌握3個(gè)東西是用來(lái)干什么的。

webpack: 它主要的用途是通過(guò)CommonJS的語(yǔ)法把所有瀏覽器端需要發(fā)布的靜態(tài)資源做相應(yīng)的準(zhǔn)備，比如資源的合并和打包。

vue-cli: 用戶生成Vue工程模板。（幫你快速開始一個(gè)vue的項(xiàng)目，也就是給你一套vue的結(jié)構(gòu)，包含基礎(chǔ)的依賴庫(kù)，只需要 npm install就可以安裝）

在這里插入圖片描述

如圖，現(xiàn)在下載的版本是14.16.0 LTS (推薦用戶現(xiàn)在使用)：

在這里插入圖片描述

雙擊安裝

1.首先我們可以看到的是默認(rèn)的為C盤路徑，這里就我們以D盤為例子進(jìn)行安裝：d:\node.js

在這里插入圖片描述

一路點(diǎn)Next

在這里插入圖片描述

點(diǎn)Finsh完成

在這里插入圖片描述

接下來(lái) 我們win+r快捷鍵

在這里插入圖片描述

我們輸入echo %PATH%

在這里插入圖片描述

我們輸入node -v 以及 npm -v

在這里插入圖片描述

我們看一下C:\Users\Administrator\AppData\Roaming

在這里插入圖片描述

我們可以看到npm的本地倉(cāng)庫(kù)跑在系統(tǒng)盤c盤的用戶目錄(沒(méi)見到npm-cache是因?yàn)闆](méi)有用過(guò)，一使用緩存目錄就生成了)，我們?cè)噲D把這2個(gè)目錄移動(dòng)回到D:\nodejs

先如下圖建立2個(gè)目錄

在這里插入圖片描述

然后運(yùn)行以下2條命令

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

如下圖，我們?cè)賮?lái)關(guān)注一下npm的本地倉(cāng)庫(kù)，輸入命令npm list -global

在這里插入圖片描述

輸入命令npm config set registry=http://registry.npm.taobao.org 配置鏡像站

在這里插入圖片描述

輸入命令npm config list 顯示所有配置信息，我們關(guān)注一個(gè)配置文件

在這里插入圖片描述

C:\Users\Administrator.npmrc

在這里插入圖片描述

使用txt文本或者是文本編輯器，我們可以看到剛才的配置信息：

在這里插入圖片描述

檢查一下鏡像站行不行命令1

npm config get registry

在這里插入圖片描述

檢查一下鏡像站行不行命令2
Npm info vue 看看能否獲得vue的信息

在這里插入圖片描述

注意，此時(shí)，默認(rèn)的模塊D:\nodejs\node_modules 目錄
將會(huì)改變?yōu)镈:\nodejs\node_global\node_modules 目錄，
如果直接運(yùn)行npm install等命令會(huì)報(bào)錯(cuò)的。
我們需要做1件事情：
1、增加環(huán)境變量NODE_PATH 內(nèi)容是：D:\nodejs\node_global\node_modules

在這里插入圖片描述