使用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 } }

好了,那么基本的搭建已經完成了,去試試吧!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM