- 文档
开始使用 ng add 创建脚手架 ng g 业务页 插件 sta Swagger API 生成器 默认参数
插件主要是针对项目一些额外 可选 行为的添加或移除,例如当你觉得代码风格对你来说意义不大(虽然我不这么看),只需要:
ng g ng-yunzai:plugin codeStyle -t=remove又或者希望项目应该有一个统一风格时:
ng g ng-yunzai:plugin codeStyleng g ng-yunzai:plugin [plugin name] -t=[add | remove]其中 [plugin name] 插件名称,从插件列表中获取,-t 支持两种值 add(默认) 和 remove。
代码风格,有几个规则:
使用 angular-eslint 校验 typescript 部分
使用 stylelint 校验 less 部分
使用 prettier 代码格式化
使用 husky 在你提交代码时进行代码校验和格式化
ng-yunzai 默认提供了一部分的代码风格配置方案,你可以在项目的根目录下找到这些配置信息,依照你自己的风格进行修饰。
# add
ng g ng-yunzai:plugin codeStyle
# remove
ng g ng-yunzai:plugin codeStyle -t=remove支持 Docker 部署。
# add
ng g ng-yunzai:plugin docker
# remove
ng g ng-yunzai:plugin docker -t=remove变更当前默认语言,参考:国际化-默认语言
# change to [en]
ng g ng-yunzai:plugin defaultLanguage --defaultLanguage=en
# change to [zh]
ng g ng-yunzai:plugin defaultLanguage --defaultLanguage=zh
# change to [zh-tw]
ng g ng-yunzai:plugin defaultLanguage --defaultLanguage=zh-tw| 名称 | 语言包名称 | 对应 Angular 语言包 | 对应 Zorro 语言包 | 对应 Yelon 语言包 |
|---|---|---|---|---|
| 简体中文 | zh-Hans,zh-cn,zh-Hans-CN,zh | zh-Hans,zh-cn,zh-Hans-CN,zh | zh_CN | zh_CN |
| 繁体中文 | zh-Hant,zh-tw,zh-Hant-TW | zh-Hant,zh-tw,zh-Hant-TW | zh_TW | zh_TW |
| 英语(美式) | en | en | en_US | en_US |
| 土耳其语 | tr | tr | tr_TR | tr_TR |
| 波兰语 | pl | pl | pl_PL | pl_PL |
| 希腊语 | el | el | el_GR | el_GR |
| 朝鲜语 | ko | ko | ko_KR | ko_KR |
| 克罗地亚 | hr | hr | hr_HR | hr_HR |
| 斯洛文尼亚文 | sl | sl | sl_SI | sl_SI |
| 法文 | fr | fr | fr_FR | fr_FR |
| 西班牙语 | es | es | es_ES | es_ES |
| 意大利语 | it | it | it_IT | it_IT |
| 阿拉伯语 | ar | ar | ar_EG | ar_SA |
ng-yunzai-sts 插件,构建 Swagger API 转换为列表、编辑页,更多有趣的玩法请自行想象。
# add
ng g ng-yunzai:plugin sts
# remove
ng g ng-yunzai:plugin sts -t=remove尽可能从项目中分析并生成静态 Icon,插件会自动在 src 目录下生成两个文件:
src/style-icons.ts 自定义部分无法解析(例如:远程菜单图标)
src/style-icons-auto.ts 命令自动生成文件
自动排除 ng-zorro-antd 和 @yelon 已经加载的图标。
ng g ng-yunzai:plugin icon同时,需要手动在 startup.service.ts 中导入:
import { ICONS_AUTO } from '../../../style-icons-auto';
import { ICONS } from '../../../style-icons';
@Injectable()
export class StartupService {
constructor(iconSrv: NzIconService) {
iconSrv.addIcon(...ICONS_AUTO, ...ICONS);
}
}有效语法
<i class="anticon anticon-user"></i>
<i class="anticon anticon-question-circle-o"></i>
<i class="anticon anticon-spin anticon-loading"></i>
<nz-icon class="anticon anticon-user" />
<nz-icon nzType="align-{{type ? 'left' : 'right'}}" />
<nz-icon [type]="type ? 'menu-fold' : 'menu-unfold'" [theme]="theme ? 'outline' : 'fill'" />
<nz-icon [type]="type ? 'fullscreen' : 'fullscreen-exit'" />
<nz-icon [nzType]="d.status === 'NORMAL' ? 'close1' : 'close2'" />
<nz-icon nzType="{{ type ? 'arrow-left' : 'arrow-right' }}" />
<nz-icon nzType="filter" theme="outline" />
<nz-input-group [nzAddOnBeforeIcon]="focus ? 'anticon anticon-arrow-down' : 'anticon anticon-search'"></nz-input-group>支持 RTL 插件,即文本方向设置为“从右向左”。
ng g ng-yunzai:plugin rtl该插件不支持移除功能,需要自行手动移除相关代码。