使用angular-cli腳手架快速搭建項目

第一步

安裝全局的angular-cli， npm install -g @angular/cli

或者 
cnpm install -g @angular/cli@v1.0.0-rc.2 – 國內淘寶源(cnpm的安裝自行搜索) 
或者 
yarn add global @angular/cli

第二步

查看各插件是否已經安裝，ng -v會出來一堆東西，如第一個圖git命令所示！

第三步

生成項目 代碼爲：ng new 項目名稱

angular-cli能夠初始化ng2或者ng4的項目，我這裏說2+；

腳手架的命令不少，我這裏只列出最經常使用的；

• 新建東東

範圍	命令	做用
new	ng new new_project	初始化新項目
Component	ng g component my-new-component	新建一個組件
Directive	ng g directive my-new-directive	新建一個指令
Pipe	ng g pipe my-new-pipe	新建一個管道
Service	ng g service my-new-service	新建一個服務
Class	ng g class my-new-class	新建一個類
Interface	ng g interface my-new-interface	新建一個接口
Enum	ng g enum my-new-enum	新建一個枚舉
Module	ng g module my-module	新建一個模塊

• 測試及檢測

範圍	命令	做用
e2e	ng e2e	跑自動化測試-本身寫測試測試用例
test	ng test	跑單元測試 – 本身寫
lint	ng lint	調用tslint跑整個項目，能夠收穫一堆警告和錯誤，–force –fix –format能夠幫助格式和修復部分問題

第四步

如今已經建立完成了，cd進入項目，會看到一些這樣的東西，說明已經建立完成了，接下來就是執行項目就能夠了，跟vue2.0同樣，此時執行用到的代碼爲：ng serve --open（和vue的npm run dev效果是同樣，自動監聽修改內容），這一點也是不一樣於angularjs（官方稱1.x爲angularjs，過了2.0就直接稱爲angular）

 

最後執行完以後就會彈出來一個頁面，就是要生成的頁面了

其餘：

• 打包

ng build: 開發模式打包，調用的環境文件是/src/environments/environments.ts; 
ng build --prod: 之前調用aot打包還須要帶上--aot,從beta31開始，--prod模式下自動調用aot打包， 
調用的環境文件是/src/environments/environments.prod.ts

---

• 彈出配置文件(還原真實的配置文件)

ng eject : 這個東西的配置不少，能夠彈出各類各樣的源配置和文件 
咱們看到的ng開頭的命令都是二重封裝的。。。有時候咱們想要改源文件或者看到原始配置是怎麼樣的這貨就用到了

• 這個腳手架支持sass和less，手動改下.angular-cli.json就能夠了，或者執行命令改下支持；
• 固然能夠配置接口反向代理，推薦仍是把不一樣接口的url寫在不一樣的environment裏面，用nginx作反向代理！ 
  ng serve --proxy-config proxy.conf.json配置反向代理(用webpack)這個老版本是支持的，如今不知道支不支持，寫法以下

{
  "/": { "target": "http://localhost:3000", "secure": false } }

好了，那麼基本的搭建已經完成了，去試試吧！