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使用组件