ionic3在win10的安裝方式－海勒姆手帳

會寫這篇完全是因為當初發願，
如果能順利穿越雷區，必當回饋眾人（下略一萬字...）

open source就是滿地的雷，
基本上把已經裝好的東西重裝是免不了的
所以我們的目標如下：
1. 完整移除先前安裝的node.js與npm
2. 安裝node.js
3. 安裝npm
4. 安裝cordova
5. 安裝ionic3
6. 建立ionic3專案
7. 執行ionic3專案

好囉, 上工囉~
1. 完整移除先前安裝的node.js與npm
如果之前沒有安裝過, 可以從第2步開始
移除node.js只要按下圖, 就能順利完成了

然後關於全域的npm以及cache的路徑在這:
C:\Users\AppData\Roaming\npm
C:\Users\USER\AppData\Roaming\npm
C:\Users\USER\AppData\Roaming\npm-cache
把以上三個資料夾都刪掉, 就大功告成了

2. 安裝node.js
這次我到下列網址, 選v6.11.2來進行安裝
https://nodejs.org/en/

安裝一直按下一步就好, OK der!

3. 安裝npm
開啟Node.js的提示命令字元, 用系統管理者的身分執行

接著輸入指令
npm install -g npm@5.0.3
這句話的意思是:使用npm程式進行全域安裝, 目標為npm5.0.3版
透過npm來安裝npm程式, 是因為其實node.js安裝好的時候, 已經有自帶npm的舊版本了
這個指令相當於更新npm至5.0.3版,
我在寫這篇的時候, 版本已經到5.3.0了, 不過實際運用上會有bug
參考許多網站的建議, 採用了相對穩定的5.0.3版
另外-g是指全域, 而非只為了單一專案
建立ionic範本時, 會要求npm, cordova, ionic要進行全域安裝

看到上述畫面就是安裝完成了

4. 安裝cordova
只要輸入 npm install -g cordova
就能透過npm安裝最能新版的cordova了

這部分就相對單純

5. 安裝ionic3
跟上一步一樣, 輸入npm install -g ionic

可以看到這時的最新版本是3.6.0版

6. 建立ionic3專案
再來就是眉角的地方了, 如果這個時候新增ionic專案的話
會出現 'ionic' 不是內部或外部命令、可執行的程式或批次檔。的錯誤訊息
原因在於windows的環境變數跟node.js預期的不一樣
我們開啟USER的環境變數, 在PATH加入C:\Users\AppData\Roaming\npm
並把他往上移到原有路徑的上面

接下來關閉並重新以系統管理員的身分開啟Node.js的提示命令字元
這樣剛剛設定的PATH才會起作用
然後在提示命令字元中, 把路徑切換到想要新增ionic專案的位置
如: cd C:\test
接著輸入ionic start
第一個問題是要你為專案名稱命名
第二個問題記得用上下鍵選擇專案的類型

按下Enter後就會開始安裝了

安裝結束時, 會出現上述的錯誤, 其實是不影響運行的
再來實際執行看看