前提
代码语言：javascript复制1、已经安装了node.js环境 2、已经安装了npm环境 windows可以通过cmd输入以下指令查看
node -v // node版本
npm -v // npm版本安装angular-cli 脚手架
代码语言：javascript复制npm install -g @angular/cli安装失败可以尝试下面方法，先卸载清楚缓存，再安装
代码语言：javascript复制npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest官方文档 ：https://github.com/angular/angular-cli
官方提供了一些指令
这里写图片描述
创建项目
创建一个名为ng-account的项目
代码语言：javascript复制ng new ng-account进入项目
代码语言：javascript复制cd ng-account运行项目
代码语言：javascript复制ng server --open生成打包（发布），默认会在项目文件夹下生成一个名为dist的文件夹。
代码语言：javascript复制ng build开发项目
用自己喜欢的开发工具打开项目文件夹。vs code、webStroem或者其他
这里写图片描述
和vue-cli构建的vue2项目很类似。我们主要修改src文件夹下的内容。其中我们新建的代码放在app中。其中spec.ts 文件是测试文件，可以删除。
新建菜单模块（menu），记账模块（accounting），统计模块（count），统计模块下面的子模块：年（count-year），月（count-month）
代码语言：javascript复制ng g component menu
ng g component accounting
ng g component count
ng g component countcount-year
ng g component countcount-month每个组建默认都有四个文件，图中已经把测试文件删除了，剩下一看后缀就知道，.css里是放样式的，.html里是页面布局的，.ts里是写代码的。
这里写图片描述
用官方提供的指令创建，会将组件自动添加到app.module中，我们就可以直接使用了。
这里写图片描述
在app.component.html使用组件
这里写图片描述
这里写图片描述
