1.2.环境搭建

ng --style=scss ng g m core 模块生成

UI整体布局

新建header、footer 、sidebar 组件

ng g c core/header --spec=false
ng g c core/footer --spec=false
ng g c core/sidebar --spec=false

编辑模板

src/app/app.component.html

<nz-layout>

  <nz-sider>
    <app-sidebar></app-sidebar>
  </nz-sider>

    <nz-header>
      <app-header></app-header>
    </nz-header>

    <nz-content>
      <router-outlet></router-outlet>
    </nz-content>

    <nz-footer>
      <app-footer></app-footer>
    </nz-footer>

</nz-layout>

定义样式

整体UI样式常使用到flex布局，该部分之后补充。相关文档请见https://www.runoob.com/w3cnote/flex-grammar.html

src/styles.css

main{
    flex:1;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    align-content:flex-start;
    align-item:center;
}

npm install --save 包名：软件依赖 npm install --dev 开发过程需要依赖

json-server：用于快速搭建rest api npm install -g json-server

json-server ./mock/data.json

@angular/cli安装失败处理方式 npm unistall -g @angular/cli npm cathe clean npm install -g @angular/cli

ng g c core/header --spec=false ng g c core/footer --spec=false ng g c core/sidebar --spec=false

共享模块 登录模块 项目模块 任务模块 日历模块

非特性模块 服务模块 reducer模块 effects模块

src/assets

ng new taskmgr -si --style=scss --skip-install（跳过包安装） ng g m core ng g m shared

constructor(@Optional() @skipSelt() parent:CoreModule){ if(parent){ throw new Error('模块已经存在，不能再次加载') } }

exports:[CommonModule]

core

cnpn i --save @angular/material

MdSidenavModule