天天看點

Node.js安裝配置及Angular CLI的安裝

NodeJS的安裝

node.js官網下載下傳位址: https://nodejs.org/en/download/

在node.js的官網上面下載下傳适合自己機型的,如果是Windows系統的話,建議下載下傳對應的 Windows Installer (.msi) 。

Node.js安裝配置及Angular CLI的安裝

下載下傳完成後,輕按兩下打開安裝,安裝路徑最好自定義,預設在C槽,也可以自定義安裝路徑,例如D:\Program Files\nodejs,其他預設點選下一步(next),直到最後安裝完成。

測試: win+r,輸入cmd,在打開的界面中輸入 node -v 來檢視目前安裝的node.js版本。

Node.js安裝配置及Angular CLI的安裝

node.js安裝過程中,會一同把npm(npm package manager)安裝,我們同時檢視一下安裝的版本:

Node.js安裝配置及Angular CLI的安裝

可能會遇到的權限問題

一般情況下,對于新安裝的使用者來說,nodejs檔案夾賦予了隻有管理者才能夠通路的權限,這個在今後安裝工具包的時候會有權限的問題而無法建立目錄,是以我們更改一下nodejs檔案夾的權限。

右鍵nodejs檔案夾,點選屬性

Node.js安裝配置及Angular CLI的安裝

切換到安全标簽,點選編輯

Node.js安裝配置及Angular CLI的安裝

将下面所有複選框選中,然後儲存,設定完成

Node.js安裝配置及Angular CLI的安裝

Node.js的配置

打開自己安裝的node.js的目錄,比如我的安裝目錄:

D:\Program Files\nodejs

此時,裡面應該隻有一個 node_modules 檔案夾

在 node_modules 的同級目錄下,建立兩個檔案夾, node_global 和 node_cache ,檔案夾的名字可以不同,但是建議可以見名知意,一個用于存在安裝的全局子產品,一個用于存放日志緩存。

在目前頁面上打開終端,可以借助與cmd打開。然後依次輸入如下指令:

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

最後關閉視窗即可。

環境變量的配置

在系統變量中,添加一個變量 NODE_PATH,它對應的值是 node_global\node_modules 檔案夾的完整路徑(注意: 此時node_global檔案夾下面是沒有node_modules檔案夾的,可以手動建立)

在使用者變量中的 Path 變量裡面, 添加一個值,是精确到node_global檔案夾的完整路徑。

可以參考我的路徑:

NODE_PATH : D:\Program Files\nodejs\node_global\node_modules

Node.js安裝配置及Angular CLI的安裝

Path : D:\Program Files\nodejs\node_global

Node.js安裝配置及Angular CLI的安裝

測試 npm 的權限問題,此時在沒有管理者權限的終端輸入 npm -v ,如果沒有警告,再打開檔案夾 node_cache\_logs\ 下面看是否生成了一個日志檔案,如果有,則配置完畢。

将 npm 更新到最新版本(可選操作),打開終端,輸入:

npm install [email protected] -g
           

安裝 Angular 用戶端

Angular CLI是Angular app開發的一個腳手架工具,可以快速的搭建Angular元件的模闆。

你用Angular CLI建立項目,生成應用和庫代碼,并且能夠完成像測試,bundling和部署這樣的一系列不同的開發任務。

為了安裝Angular CLI,打開終端視窗,運作如下指令,指令中的-g表示全局可用

npm install -g @angular/cli
           

安裝完成後打開指令行輸入ng nersion檢視Angular CLI的版本号,如出現下面的樣子說明安裝成功。如果報錯:”'ng' 不是内部或外部指令,也不是可運作的程式或批處理檔案”,則是環境變量設定不正确導緻,需要參考上面環境變量的設定步驟。

Node.js安裝配置及Angular CLI的安裝

删除Angular CLI(需要的時候再用)

npm uninstall -g @angular/cli
npm cache clean --force
           

繼續閱讀