Angular項目環境的搭建&項目初始化----AngularCLI 11.x版本的使用詳解
一、准備環境
1、安裝node.js
安裝步驟請參考【Node.js下載安裝及配置:https://www.cnblogs.com/freecolor/p/14000263.html】
1 // 輸入以下命令，檢查是否安裝成功（看到版本號即成功） 2 node -v #----查看node版本號 (至少>=6.0版本) 3 npm -v #----查看npm版本號 (至少>=3.0版本)
2、安裝python 2.7.x版本即可【下載地址：https://www.python.org/downloads/release/python-2714/】
*注意：安裝Python時候，注意勾選安裝界面上的`Add Python to path`，這樣才能自動將Python安裝到系統環境變量中；
*安裝完畢之后，可以在命令行中運行`python`，檢查是否成功安裝了python。
1 // 安裝成功后 輸入以下命令驗證 2 python 3 4 // 或者 5 6 python --version
3、安裝C++的編譯工具Visual Studio（注意：不是Visual Studio Code）
1 //如果沒有安裝Visual Studio 則需要輸入以下命令：【安裝過程比較久請耐心等待】 2 npm install --global --production windows-build-tools
注意： Windows Vista / 7 依賴 .NET Framework 4.5.1
**安裝windows-build-tools一直處於still waiting for installer log file ... 狀態
這是因為.NET Framework的版本過低,升級即可,進入https://dotnet.microsoft.com/download/visual-studio-sdks，單擊Developer Pack下載4.5.1版本，雙擊安裝后在繼續執行 windows-build-tools命令即可
4、設置npm鏡像為taobao鏡像，以加速后面的過程（提高下載速度）
npm config set registry https://registry.npm.taobao.org --global
二、安裝腳手架AngularCLI &應用其初始化項目
Angular CLI 是 Angular 官方開發的一個類似於 Vue CLI 的腳手架開發工具，它幫我們集成了 webpack 打包、開發服務器、單元測試、自動編譯、部署等功能特性。
1、安裝腳手架工具AngularCLI【win10系統，建議以管理員身份運行黑窗口，執行以下命令】
1 //全局安裝腳手架工具 2 npm i -g @angular/cli 3 4 //輸入命令測試是否安裝成功（查看版本號） 5 ng --version
安裝失敗解決方法：
- 如果安裝失敗，請手動把全局的
@angular/cli刪掉：npm uninstall -g @angular/cli - 如果
node_modules刪不掉，爆出路徑過長之類的錯誤，請嘗試用一些文件粉碎機之類的工具強行刪除。 - 無論你用什么開發環境，安裝的過程中請仔細看錯誤日志。很多同學沒有看錯誤日志的習慣，報錯的時候直接懵掉，根本不知道發生了什么。
- 然后重新安裝
2、使用腳手架工具初始化項目
//輸入以下命令，即可初始化項目 ng new 項目名稱 #--如 ng new my-ng-project
3、啟動運行項目：進入項目根目錄執行以下命令即可
1 //使用方法1： 2 npm start 3 4 //或者使用方法2：【看好是 serve 不是 server】 5 ng serve
然后就可以看到一個狠酷的頁面效果😂😂😂😂😂😂
PS:
一些常見的坑
@angular/cli 這種“全家桶”式的設計帶來了很大的方便，同時也有一些人不太喜歡，因為很多底層的東西被屏蔽掉了，開發者不能天馬行空地自由發揮。比如：@angular/cli 把底層 webpack 的配置文件屏蔽掉了，很多喜歡自己手動配 webpack 的開發者就感到很不爽。
對於國內的開發者來說，上面這些其實不是最重要的，國內開發者碰到的坑主要是由兩點引起的：
- 第一點是網絡問題：比如
node-sass這個模塊你很有可能就裝不上，原因你懂的。 - 第二點是開發環境導致的問題：國內使用 Windows 平台的開發者比例依然巨大，而 @angular/cli 在 Windows 平台上有一些非常惡心的依賴，比如它需要依賴 python 環境、Visual Studio 環境。
所以，如果你的開發平台是 Windows，請特別注意：
- 給npm設置使用taoboa鏡像下載包
- 如果安裝失敗，請手動把 node_modules 目錄刪掉重試一遍，全局的 @angular/cli 也需要刪掉重裝，cnpm uninstall -g @angular/cli。
- 如果 node_modules 刪不掉，爆出路徑過長之類的錯誤，請嘗試用一些文件粉碎機之類的工具強行刪除。
- 無論你用什么開發環境，安裝的過程中請仔細看 log。很多朋友沒有看 log 的習慣，報錯的時候直接懵掉，根本不知道發生了什么。
關於編輯器的選擇
如你所知，一直以來，前端開發領域並沒有一款特別好用的開發和調試工具。
- WebStorm 很強大，但是吃資源很嚴重。
- Sublime Text 插件很多，可惜要收費，而國內的企業還沒有養成花錢購買開發工具的習慣。
- Chrome 的開發者工具很好用，但是要直接調試 TypeScript 很麻煩。
所以，Visual Studio Code（簡稱 VS Code）才會呈現出爆炸性增長的趨勢。它是微軟開發的一款編輯器，完全開源免費。VS Code 底層是 Electron，界面本身是用 TypeScript 開發的。對於 Angular 開發者來說，當然要強烈推薦 VS Code。最值得一提的是，從1.14開始，可以直接在 VS Code 里面調試 TypeScript 代碼。