快速上手
最简单的使用方式参照以下 StackBlitz 演示,也推荐 Fork 本例来进行 ,注意不要在实际项目中这样使用。
实际项目开发中,你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。我们强烈建议使用官方的 @angular/cli
工具链辅助进行开发,下面我们用一个简单的实例来说明。
2. 创建一个项目
执行以下命令,@angular/cli
会在当前目录下新建一个名称为 PROJECT-NAME
的文件夹,并自动安装好相应依赖。
$ ng new PROJECT-NAME
3. 初始化配置
$ ng add ng-zorro-antd
开发者可以通过增加参数来完成个性化的初始化配置,例如国际化或者自定义主题等,详细可以参考 脚手架 部分。
一键启动调试,运行成功后显示欢迎页面。
5. 构建和部署
入口文件会构建到 dist
目录中,你可以自由部署到不同环境中进行引用。
如果想自己维护工作流,理论上你可以利用 Angular 生态圈中的 各种脚手架进行开发,如果遇到问题可参考我们所使用的 进行定制。
1. 安装组件
$ npm install ng-zorro-antd --save
这样就成功在全局引入了 ng-zorro-antd
。
3. 引入样式与 SVG 资源
在 angular.json
文件中引入样式和 SVG icon 资源。
{
...
{
"glob": "**/*",
"input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
"output": "/assets/"
}
],
"styles": [
...
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
}
你可以通过引入子 module 和单独打包的 CSS/less 文件来单独使用某个组件。
例如,你只想使用 Button 组件,那么你就可以引入 NzButtonModule
而不是 NgZorroAntdModule
,在 style.css
里导入组件对应的样式文件而不是全部的样式文件。
在 module 文件里:
import { CommonModule } from '@angular/common';
import { NzButtonModule } from 'ng-zorro-antd/button';
@NgModule({
declarations: [
...
],
imports: [
CommonModule,
NzButtonModule
]
})
export class YourModule { }
在 style.css 文件里:
另:如果你想单独引入多个组件,我们建议使用 less,在你的 style.less 里导入各个组件的 entry.less 文件:
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
比较单独引入和传统的全部引入方式
如果你符合或遇到了如下情形,推荐你使用单独引入:
- 你的项目中仅仅用到了少数几个组件(你可以使用 ShareModule 来包装你需要用到的组件)