项目概述
开发一个多功能平台,具有展示产品,申请服务开通,申请记录查看等功能,与公司内部系统相连接,初步功能较为单一,
后期可能会扩展新功能。
项目选型
由于上一个项目选择的Abp框架,配合使用的是angular6的前端框架,这次我还是继续选择angular6作为前端开发框架,
UI框架,选择了ng-zorro,阿里维护的开源项目,ant design设计原则,用起来应该还是比较顺手的。
过程
1.搭建UI框架
ng-zorro官网,“快速上手”中有粗略的步骤,我走个捷径,选择最简单的命令执行,自动初始化所有配置。
$ ng add ng-zorro-antd
2.选择布局
根据设计图稿,选择了“顶部-侧边布局-通栏”,这一布局样式,最为接近,但需要去掉顶部。
3.自定义主题
ng-zorro自带的主题中,没有本次项目需要的主题颜色,所以需要自定义主题,幸好ng-zorro有教程引导。
4.项目实战
首先将布局写到文件中,由于开始的时候觉得整个的页面布局也就如此,因此,将布局全部写到app.component中,页面的nz-content放上router-outlet配合路由,就可以实现页面跳转,后面发现这个做法还是有些欠妥,所以后面加了个root.component为入口,页面布局依然保留在了app.component中。
<nz-layout class="layout">
<nz-layout>
<nz-sider [nzWidth]="200" style="background:#fff">
<ul nz-menu [nzMode]="'inline'" style="height:100%">