- Notifications
You must be signed in to change notification settings - Fork246
Description
第一个本地实例 First Local Development
我们可以在 ionic 开发框架下使用 NG-ZORRO-MOBILE，下面我们用一个简单的实例来说明。
NG-ZORRO-MOBILE can be used inIonic, let's get started with a simple example.
1. 安装脚手架工具 Installation
使用前，务必确认Node.js 已经安装。
Please make sureNode.js has been installed before use.
$ npm install -g ionic
2. 创建一个项目 Create a New Project
在创建项目之前，请确保
ionic已被成功安装。
Please make sure
ionichas been installed before use.
执行以下命令，ionic 会在当前目录下新建一个名称为PROJECT-NAME 的文件夹，并自动安装好相应依赖。
A new project can be created using ionic CLI tools with following command.
$ ionic start PROJECT-NAME
3. 安装 Install ng-zorro-antd-mobile
进入项目文件夹，执行以下命令后将自动完成ng-zorro-antd-mobile 的初始化配置。
ng-zorro-antd-mobile will be installed in the project folder with the following command.
$ ng add ng-zorro-antd-mobile
开发者可以通过增加参数来完成个性化的初始化配置，例如国际化或者自定义主题等，还可以快速生成模板代码，详细可以参考脚手架 部分。
ng-zorro-antd-mobile supports init configuration with schematics, you can get more info in theschematics part.
4. 开发调试 Development & Debugging
一键启动调试，运行成功后显示欢迎页面。
Run your project now, you can see the img below now.
$ ionic serve
自行构建 Customized Work Flow
1. 安装组件 Installng-zorro-antd-mobile
$ npm install ng-zorro-antd-mobile --save
2.引入模块 Import module
在 app.modules.ts 中，全局引入ng-zorro-antd-mobile。
Addng-zorro-antd-mobile globally in app.modules.ts。
import{NgModule}from'@angular/core';import{FormsModule}from'@angular/forms';import{RouteReuseStrategy}from'@angular/router';import{HttpClientModule}from'@angular/common/http';import{BrowserModule}from'@angular/platform-browser';import{BrowserAnimationsModule}from'@angular/platform-browser/animations';import{IonicModule,IonicRouteStrategy}from'@ionic/angular';import{SplashScreen}from'@ionic-native/splash-screen/ngx';import{StatusBar}from'@ionic-native/status-bar/ngx';import{AppComponent}from'./app.component';import{AppRoutingModule}from'./app-routing.module';import{NgZorroAntdMobileModule}from'ng-zorro-antd-mobile';@NgModule({declarations:[AppComponent],entryComponents:[],imports:[BrowserModule,IonicModule.forRoot(),AppRoutingModule,BrowserAnimationsModule,FormsModule,HttpClientModule,NgZorroAntdMobileModule],providers:[StatusBar,SplashScreen,{provide:RouteReuseStrategy,useClass:IonicRouteStrategy}],bootstrap:[AppComponent]})exportclassAppModule{}
3.引入样式 Import style
在 angular.json 中，全局引入ng-zorro-antd-mobile样式。
Addng-zorro-antd-mobile style globally in angular.json。
"styles": ["node_modules/ng-zorro-antd-mobile/src/ng-zorro-antd-mobile.min.css", {"input":"src/theme/variables.scss" }, {"input":"src/global.scss" }]