1. 程式人生 > >使用webStorm開發Angular JS2--記錄從安裝webstorm到第一個成功demo的經過(遇到的常見問題)

使用webStorm開發Angular JS2--記錄從安裝webstorm到第一個成功demo的經過(遇到的常見問題)

第一步:在webstorm官網上安裝webStorm   https://www.jetbrains.com/webstorm/download/#section=windows

選擇windows系統的安裝 ,安裝步驟基本跟著導引next ,結束之後,單擊圖示跳出的資訊不用管。關閉這個視窗。再點選這個圖示,出現了幾個需要你接受或者next 的彈窗,根據需要點選後,最後的啟用webstorm介面是這樣的:

第一次,我選擇了license server,但是出現了無法找到這個有效的地址,域名過期了。在嘗試了很多網友分享的網址都是沒有效果,啟用失敗;

第二次,我選擇了Activation code即通過啟用碼啟用,試過一個網站,線上的啟用碼生成,但是啟用失敗,被告知已經失效了,於是繼續查詢,最終在一個貼吧上找到了可以使用的啟用碼。啟用之後就可以正常使用了。

後來找到一個博主,在長期更新啟用碼,在這裡推一下,也方便之後自己的使用:

https://blog.csdn.net/insistlzh/article/details/80285901

第二步:

              安裝Node.js (麻煩在配置上)  因為Agualar 的需要使用Node.js的npm工具包,npm裡面有很多前端開發的工具。

                  在Node.js官網上,下載對應的檔案

     在彈窗中不斷的next,一般選擇預設的安裝路徑就好,這裡選擇Add to PATH直接把系統變數配置好,之後不需要自己配置,確認安裝後,進行安裝。

安裝完成後,在nodejs檔案下新建兩個檔案node_cache,node_global ,前者存放的是下載包快取,後者儲存的是全域性模組。

第三步:****   快捷鍵windows+R 輸入cmd  執行node -v 和npm -v,輸出以下的結果則是安裝成功了,在第一次執行的時候,在我這裡,發生了node -v可以執行,但是npm -v 無法執行,游標一直在閃,就是沒有資料輸出。在找了很多方法,如果是npm -v 報錯的朋友 你們可以試一下刪除node和node modules 等檔案,然後再重新進行nodejs的安裝。但是在我這裡是沒有報錯,經歷了幾個小時的查詢和重灌nodejs,後來發現只需要找到C盤(預設安裝)的user\Administrator下的npmrc刪除了就好。執行成功。

第四步:配置prefix和cache目錄

Cmd 執行以下兩條命令

npm config set prefix "D:\ProgramFiles\nodejs\node_global\"

npm config set cache "D:\ProgramFiles\nodejs\node_cache"

第五步:  下載 配置node-sass,angularcli 是要依賴node-sass的

在Windows下,首先要通過git下載win32-x64-51_binding.node,下載地址:https://github.com/sass/node-sass/releases/    下載完成後放到nodejs的安裝目錄下面。    

                 Cmd命令列:

                 npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/

                  set SASS_BINARY_PATH=D:\ProgramFiles\nodejs\win32-x64-51_binding.node

第六步:安裝typescript  js的超集,適用於Angular的開發

               進入cmd 執行

               npm install -g typescript typings

第七步:安裝angular-cli 是Angular的基礎

             在這之前,先安裝一下淘寶映象,下載快一點

              npm config set registry  https://registry.npm.taobao.org

              cnpm install -g @angular/cli

       初步完成所有配置啦 然後進行測試

       在cmd執行ng -v,測試成功顯示如下的結果

第八步:在webstorm中新建一個Project,選擇Angular CLI,選擇自己要建的Location位置,下面的兩個路徑都使用預設的就好。

在新建的工程目錄結構有這些:

選中package.json 右鍵選中 show npm scripts

在出現的npm視窗,選擇start,右鍵執行start

工程開始啟動,日誌如下,注意紅色部分列印了訪問地址,我們現在複製開啟該網頁