1. 程式人生 > >Angular學習筆記(工具篇)----Angular CLI

Angular學習筆記(工具篇)----Angular CLI

進入 詳情 基礎 rate 9.png cnpm 基本用法 版本問題 問題

Angular CLI 的作用

技術分享圖片

首先安裝npm 和node 詳情:http://www.cnblogs.com/gorgeous/p/8074180.html

在安裝 npm install -g @angular/cli

驗證

技術分享圖片

創建Angular項目
ng new my-app

進入Angular項目
cd my-app

啟動項目
ng serve


優化項目創建方法(優化點:npm速度較慢)

ng new my-app --skip-install
cd my-app
cnpm install
ng serve

Ng new 簡介 多多閱讀英文,不行就像我這樣

ng help 查看

技術分享圖片

技術分享圖片

例如 常見的 ng version

技術分享圖片

Ng serve 簡介(可以動態編譯)
運行在不同的端口
ng serve --port 4201

Ng generate簡介


創建一個組件
ng g component test

技術分享圖片

上述更新的文件

技術分享圖片

組件的基本用法(要有Angular5 的基礎)

技術分享圖片

成功

技術分享圖片

創建一個服務
ng g service test

更多詳細的 gitbub https://github.com/angular/angular-cli/wiki/generate


Ng test


Ng bulid打包 提升性能

技術分享圖片

技術分享圖片

ng build -prod 生產環境文件就更少了(自己實現報了個錯 網友說 是cnpm原因,或者版本問題 下回解決就好 )

Angular學習筆記(工具篇)----Angular CLI