Angular4記帳webApp練手項目之一（利用angular-cli構建Angular4.X項目）

前提

一、已經安裝了node.js環境 
二、已經安裝了npm環境 
windows能夠經過cmd輸入如下指令查看

node -v // node版本 npm -v // npm版本

• 1
• 2

安裝angular-cli 腳手架

npm install -g @angular/cli

• 1

安裝失敗能夠嘗試下面方法，先卸載清楚緩存，再安裝

npm uninstall -g @angular/cli npm cache clean npm install -g @angular/cli@latest

• 1
• 2
• 3

官方文檔 ：https://github.com/angular/angular-cli

官方提供了一些指令 

建立項目

建立一個名爲ng-account的項目

ng new ng-account

• 1

進入項目

cd ng-account

• 1

運行項目

ng server --open

• 1

生成打包（發佈），默認會在項目文件夾下生成一個名爲dist的文件夾。

ng build

• 1

開發項目

用本身喜歡的開發工具打開項目文件夾。vs code、webStroem或者其餘

和vue-cli構建的vue2項目很相似。咱們主要修改src文件夾下的內容。其中咱們新建的代碼放在app中。其中spec.ts 文件是測試文件，能夠刪除。

新建菜單模塊（menu），記帳模塊（accounting），統計模塊（count），統計模塊下面的子模塊：年（count-year），月（count-month）

ng g component menu
ng g component accounting
ng g component count ng g component count\count-year ng g component count\count-month 

• 1
• 2
• 3
• 4
• 5
• 6

每一個組建默認都有四個文件，圖中已經把測試文件刪除了，剩下一看後綴就知道，.css裏是放樣式的，.html裏是頁面佈局的，.ts裏是寫代碼的。 

用官方提供的指令建立，會將組件自動添加到app.module中，咱們就能夠直接使用了。 

在app.component.html使用組件