angular開發環境配置全套教程

第一步、安裝node.jsnode

 

1.須要下載的文件路徑:https://nodejs.org/en/download/typescript

2.安裝nodejs:npm

 

 

3.驗證node.js瀏覽器

 

 

 

4.npm安裝以及驗證:測試

npm的安裝。因爲新版的NodeJS已經集成了npm,因此以前npm也一併安裝好了。一樣可使用cmd命令行輸入"npm -v"來測試是否成功安裝spa

 

 

 

5.配置npm全局路徑存放位置以及cache的路徑:命令行

例如:我但願將以上兩個文件夾放在NodeJS的主目錄下,便在NodeJS下創建「node_global」3d

以及「node_cache」兩個文件夾。以下圖code

 

 

5.1啓動cmd: 輸入
npm config set prefix "C:\Program Files\nodejs\node_global"以及npm config set cache "C:\Program Files\nodejs\node_cache"blog


5.2關閉cmd,打開系統對話框,「個人電腦」右鍵「屬性」-「高級系統設置」-「高級」-「環境變量」。以下圖

 

 

 

5.3進入環境變量對話框,在系統變量下新建"NODE_PATH",輸入」C:\Program Files\nodejs\node_global\node_modules「因爲改變了module的默認地址,因此上面的用戶變量都要跟着改變一下(用戶變量"PATH"修改成「C:\Program Files\nodejs\node_global\」),要不使用module的時候會致使輸入命令出現「xxx不是內部或外部命令,也不是可運行的程序或批處理文件」這個錯誤。

 

 

以上步驟講述了node.js和npm的安裝

 

第二步:安裝ts、cli

 

6.TypeScript在npm的安裝:

打開cmd

輸入命令行:npm install -g typescript

驗證tsc -v安裝狀況

 

 

 

7.Angular CLI的安裝:

打開cmd

輸入命令行:npm install  -g @angular/cli

驗證angular CLI安裝狀況

 

 

 

若是想從新卸載安裝,給你們準備了寶典:

Npm uninstall -g @angular/cli

Npm cache clean

Npm install -g @angular/cli@latest

 

出現「Please take the following steps to avoid issues:

"npm install --save-dev @angular/cli@latest"」提示

輸入命令行語句:npm install --save-dev @angular/cli@latest

驗證ng -v:

 

 

 

第三步:安裝IDE、演示新建第一個項目

 

7.推薦安裝IDE:VSCode

下載地址:http://www.vscode.org/

提示:下載後直接安裝啓動,無需配置任何系統環境變量

 

 

 

8.建立運行咱們的第一個angular項目:「Hello Angular!」

右擊打開cmd

輸入命令行語句:

建立新項目:ng new Hello-Angular

項目安裝依賴包:cnpm install

啓動項目:cnpm start

 

 

 

打開瀏覽器輸入:localhost:4200/

 

 

附送淘寶鏡像安裝教程:

打開cmd

輸入:npm install -g cnpm --registry=https//registry.npm.taobao.org

相關文章
相關標籤/搜索