分享一个最近在做的一个前端项目，前端选型Angular，组件库选择的是ng-zorro(官网：http://ng.ant.design/docs/introduce/zh)。项目结构以及项目里面用到的一些通用库比如路由复用标签、路由守卫控制等等参考的是ng-alain(官网：https://ng-alain.com/zh，https://github.com/ng-alain/delon)。
ng-zorro和ng-alain都来自阿里巴巴公司。感谢。
一、项目构建
大概说下项目的生成步骤。ng less工程、ng-zorro的引入、jquery的引入、echarts的引入、layer的引入等等。
1.1、angular 创建工程(less)
- ng new xxx --style less
ng 命令创建工程，xxx是项目的名字，注意这里样式我们采用了less的方式。因为less是完全兼容css的。less里面可以直接写css的格式。
1.2.、nz-zorro 引入(--theme 把主题参数引入进来方便修改zorro样式)
- ng add ng-zorro-antd --theme
会在 src 目录下自动生成 theme.less。后续咱们要是需要修改zorro默认样式直接在这里面修改。可以参考http://ng.ant.design/docs/customize-theme/zh里面的内容。
1.3、jquery 引入
jquery很多开源库都需要依赖jquery。所以咱们先一步把他引入尽量。
- npm install --save jquery
- npm install @types/jquery --save
- angular.json 文件里面添加jquery对应的js依赖。"node_modules/jquery/dist/jquery.min.js"
1.4、echarts 引入(图表控件)
我们项目中需要大量的用到图标控件。而且我们组的其他兄弟对echarts比较熟悉。所以我们把echarts引入进来。
- npm install echarts --save
- npm install ngx-echarts --save
- angular.json 添加echarts对应的js依赖。 echarts.min.js依赖，"node_modules/echarts/dist/echarts.min.js"
5. layer 引入(弹窗控件)
整个项目的弹窗我们使用layer，所以我们把layer也引入进来。layer下载地址 https://layer.layui.com/ 选绿色版下载。
- layer下载之后解压，拷贝 layer 文件到 assets 目录下(注意哦是assets目录下，如果目录不同下面的angular.json里面引入css、js也要改成对应的路径)。
- angular.json 添加 css依赖 "src/assets/layer/theme/default/layer.css"
- angular.json 添加 js依赖 "src/assets/layer/layer.js"
6. 统一样式
统一样式，目的也是方便样式的统一管理，比如menu的高度定义的太低了、item的高度啥啥的，
以后咱们只需要修改src/styles/theme.less文件就行。
- src/styles 目录下新建 theme.less，同时在angular.json里面添加 "src/styles/theme.less"
- src/styles 目录下新建 index.less，同时在angular.json里面添加 "src/styles/index.less"
需要注意styles文件在angular.json里面的顺序，倒数第一个styles.less、倒数第二个index.less，倒数第三个theme.less
theme.less文件统一放置我们整个应用的样式变量。比如menu高度，标题栏高度，字体颜色等等。index.less里面放置咱们整个应用的通用样式。
angular.json文件内容对应jquery、echarts、layer引入添加的js、css截图如下。
8. 推荐项目结构
整个项目的目录结构完全参考的ng-alain的目录结构。更加详细的内容可以参考an-alain(https://ng-alain.com/zh)的介绍。
├── core
│ ├── net
│ │ ├── default.interceptor.ts(网络拦截器)
│ │ ├── http-base.service.ts(对网络请求的简单封装)
│ ├── startup
│ │ ├── startup.service.ts(保存用户相关信息)
│
├── entity (实体类)
│ ├── request(request实体类)
│ │ ├── xx
│ │ │ ├── xx.ts
│ │ ├── xx
│ │ │ ├── xx.ts
│ ├── response(response实体类)
│ │ ├── xx
│ │ │ ├── xx.ts
│ │ ├── xx
│ │ │ ├── xx.ts
│ ├── xx
│ │ ├── xx.ts
│ ├── xx
│ │ ├── xx.ts
│
├── layout (通用布局)
│ ├── default(正常登入布局)
│ │ ├── xx.html
│ │ ├── xx.less
│ │ ├── xx.ts
│ │ ├── README.md
│
├── routes
│ ├── dire1
│ │ ├── index.html
│ │ ├── index.less
│ │ ├── index.ts
│ │ ├── README.md
│ ├── dire2
│ │ ├── index.html
│ │ ├── index.less
│ │ ├── index.ts
│ ├── routes.module.ts
│ ├── routes-routing.module.ts
│ ├── README.md
├── shared(所有子系统共享)
│ ├── components(公共组件)
│ │ ├── comp1
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ │ ├── comp2
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ ├── directives(公共指令)
│ │ ├── dire1
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ │ ├── dire2
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ ├── shared.module.ts
│ ├── README.md
│
二、特别分享
2.1、nz-zorro组件库样式修改
nz-zorro组件库使用的时候修改nz-zorro对应的them.less文件还满足不了我们的需求的时候。试试用:host ::ng-deep 或者只是用::ng-deep。如下代码所示。
:host ::ng-deep .ant-input-affix-wrapper .ant-input:not(:first-child){
padding-left: 30px;
}
2.2、没事瞧瞧ng-alain对应delon库的代码
delon库代码地址https://github.com/ng-alain/delon 至少我们项目里面关于权限控制，路由服用标签完全是参考的delon库里面的代码。
这次的分享就这些。重点在项目的创建上。也是特别感谢阿里给出的nz-zorro组件库和ng-alain脚手架。
