快速上手
最简单的使用方式参照以下 StackBlitz 演示,也推荐 Fork 本例来进行 ,注意不要在实际项目中这样使用。
实际项目开发中,你会需要对 TypeScript 代码的构建、调试、代理、打包部署等一系列工程化的需求。 我们强烈建议使用官方的 @angular/cli
工具链辅助进行开发,下面我们用一个简单的实例来说明。
创建一个项目
执行以下命令,@angular/cli
会在当前目录下新建一个名称为 PROJECT-NAME
的文件夹,并自动安装好相应依赖。
$ ng new PROJECT-NAME
进入项目文件夹,执行以下命令后将自动完成 ng-zorro-antd
的初始化配置,包括引入国际化文件,导入模块,引入样式文件等工作。
$ ng add ng-zorro-antd
开发者可以通过增加参数来完成个性化的初始化配置,例如国际化或者自定义主题等,详细可以参考 部分。
开发调试
一键启动调试,运行成功后显示欢迎页面。
$ ng serve --port 0 --open
入口文件会构建到 dist
目录中,你可以自由部署到不同环境中进行引用。
如果想自己维护工作流,理论上你可以利用 Angular 生态圈中的 各种脚手架进行开发,如果遇到问题可参考我们所使用的 配置 进行定制。
安装组件
$ npm install ng-zorro-antd --save
使用全部组件样式
该配置将包含组件库的全部样式,如果只想使用某些组件请查看 配置。
在 angular.json
中引入了
{
"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
}
@import "~ng-zorro-antd/ng-zorro-antd.min.css";
在 style.less
中引入 less 样式文件
使用特定组件样式
使用特定组件样式时前需要先引入基本样式(所有组件的共用样式)。
在 style.css
中引入预构建样式文件
@import "~ng-zorro-antd/style/index.min.css"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/index.min.css"; /* 引入组件样式 */
在 style.less
中引入 less 样式文件
@import "~ng-zorro-antd/style/entry.less"; /* 引入基本样式 */
@import "~ng-zorro-antd/button/style/entry.less"; /* 引入组件样式 */
引入组件模块
最后你需要将想要使用的组件模块引入到你的 文件和特性模块中。
以下面的 NzButtonModule
模块为例,先引入组件模块:
import { NzButtonModule } from 'ng-zorro-antd/button';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
NzButtonModule
]
export class AppModule { }