diff --git a/readme.md b/readme.md
index f59c3359a0c389f710a8e37e3e946482207ea6f4..9efb774f922427cab6e8e8b3b60755f623f82b19 100644
--- a/readme.md
+++ b/readme.md
@@ -17,3 +17,29 @@ cd myApp
 ionic serve
 ```
 
+
+
+*****
+
+### 新建一个ionicUI 页面
+
+```
+ionic g page ionicUI
+```
+
+### 添加到tabs栏
+
+***********
+
+### 新建一个ionicUI 页面
+
+```
+ionic g component ui
+```
+
+并在ionicUI页面上引入使用<ui></ui>
+
+
+
+******
+
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index e2c9d8d36a70b4d2e0f428fce82348310ce6a12b..7a3e346a290b6f32f828e96828b4da3adcdb1b56 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,6 @@
 import { NgModule, ErrorHandler } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { ComponentsModule } from '../components/components.module';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
 
@@ -7,6 +8,7 @@ import { AboutPage } from '../pages/about/about';
 import { ContactPage } from '../pages/contact/contact';
 import { HomePage } from '../pages/home/home';
 import { TabsPage } from '../pages/tabs/tabs';
+import { IonicUiPage } from '../pages/ionic-ui/ionic-ui';
 
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
@@ -17,11 +19,13 @@ import { SplashScreen } from '@ionic-native/splash-screen';
     AboutPage,
     ContactPage,
     HomePage,
-    TabsPage
+    TabsPage,
+    IonicUiPage
   ],
   imports: [
     BrowserModule,
-    IonicModule.forRoot(MyApp)
+    IonicModule.forRoot(MyApp),
+    ComponentsModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
@@ -29,7 +33,8 @@ import { SplashScreen } from '@ionic-native/splash-screen';
     AboutPage,
     ContactPage,
     HomePage,
-    TabsPage
+    TabsPage,
+    IonicUiPage
   ],
   providers: [
     StatusBar,
diff --git a/src/components/components.module.ts b/src/components/components.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..807fc5838c9105f5e4cfce38fdc053c9eeb462ae
--- /dev/null
+++ b/src/components/components.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { UiComponent } from './ui/ui';
+@NgModule({
+	declarations: [UiComponent],
+	imports: [],
+	exports: [UiComponent]
+})
+export class ComponentsModule {}
diff --git a/src/components/ui/ui.html b/src/components/ui/ui.html
new file mode 100644
index 0000000000000000000000000000000000000000..3511012bfabe2d7aa56077d923f9bcc99ce96e1b
--- /dev/null
+++ b/src/components/ui/ui.html
@@ -0,0 +1,4 @@
+<!-- Generated template for the UiComponent component -->
+<div>
+  {{text}}
+</div>
diff --git a/src/components/ui/ui.scss b/src/components/ui/ui.scss
new file mode 100644
index 0000000000000000000000000000000000000000..5c2c16f69d2228595f0deae31e60aee139b94c81
--- /dev/null
+++ b/src/components/ui/ui.scss
@@ -0,0 +1,3 @@
+ui {
+
+}
diff --git a/src/components/ui/ui.ts b/src/components/ui/ui.ts
new file mode 100644
index 0000000000000000000000000000000000000000..abcd2d38bdbf99d529cd48338dc9fa9b2db2ef11
--- /dev/null
+++ b/src/components/ui/ui.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+/**
+ * Generated class for the UiComponent component.
+ *
+ * See https://angular.io/api/core/Component for more info on Angular
+ * Components.
+ */
+@Component({
+  selector: 'ui',
+  templateUrl: 'ui.html'
+})
+export class UiComponent {
+
+  text: string;
+
+  constructor() {
+    console.log('Hello UiComponent Component');
+    this.text = 'Hello World';
+  }
+
+}
diff --git a/src/pages/ionic-ui/ionic-ui.html b/src/pages/ionic-ui/ionic-ui.html
new file mode 100644
index 0000000000000000000000000000000000000000..de995351d6b30412df72c2b969b86ae4c5ecc66e
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.html
@@ -0,0 +1,19 @@
+<!--
+  Generated template for the IonicUiPage page.
+
+  See http://ionicframework.com/docs/components/#navigation for more info on
+  Ionic pages and navigation.
+-->
+<ion-header>
+
+  <ion-navbar>
+    <ion-title>ionicUI</ion-title>
+  </ion-navbar>
+
+</ion-header>
+
+
+<ion-content padding>
+  <ui></ui>
+
+</ion-content>
diff --git a/src/pages/ionic-ui/ionic-ui.module.ts b/src/pages/ionic-ui/ionic-ui.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3a560c873f8b2be76bca3b9c02b0322e15d3a4a9
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { IonicUiPage } from './ionic-ui';
+
+@NgModule({
+  declarations: [
+    IonicUiPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(IonicUiPage),
+  ],
+})
+export class IonicUiPageModule {}
diff --git a/src/pages/ionic-ui/ionic-ui.scss b/src/pages/ionic-ui/ionic-ui.scss
new file mode 100644
index 0000000000000000000000000000000000000000..3e89dfb06d9bb6e373e380255130b8e326336e7c
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.scss
@@ -0,0 +1 @@
+page-ionic-ui {}
diff --git a/src/pages/ionic-ui/ionic-ui.ts b/src/pages/ionic-ui/ionic-ui.ts
new file mode 100644
index 0000000000000000000000000000000000000000..312019e1bab9f97793b105cac5d5edaf44accb9a
--- /dev/null
+++ b/src/pages/ionic-ui/ionic-ui.ts
@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the IonicUiPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-ionic-ui',
+  templateUrl: 'ionic-ui.html',
+})
+export class IonicUiPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad IonicUiPage');
+  }
+
+}
diff --git a/src/pages/tabs/tabs.html b/src/pages/tabs/tabs.html
index fa3921a436f8d7fc8e7b9b54c1283a33d67d5e30..500dcb8f5fdeb4c586678c29592f68ec0fe83681 100644
--- a/src/pages/tabs/tabs.html
+++ b/src/pages/tabs/tabs.html
@@ -2,4 +2,5 @@
   <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
   <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
   <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
+  <ion-tab [root]="tab4Root" tabTitle="IonicUI" tabIcon="ionic"></ion-tab>
 </ion-tabs>
diff --git a/src/pages/tabs/tabs.ts b/src/pages/tabs/tabs.ts
index f80301b50947483aefc4620816d41347af4ab85d..d1195ec85705a50f3b8abbbb415f8242ba1699a1 100644
--- a/src/pages/tabs/tabs.ts
+++ b/src/pages/tabs/tabs.ts
@@ -3,6 +3,7 @@ import { Component } from '@angular/core';
 import { AboutPage } from '../about/about';
 import { ContactPage } from '../contact/contact';
 import { HomePage } from '../home/home';
+import { IonicUiPage } from '../ionic-ui/ionic-ui';
 
 @Component({
   templateUrl: 'tabs.html'
@@ -12,6 +13,8 @@ export class TabsPage {
   tab1Root = HomePage;
   tab2Root = AboutPage;
   tab3Root = ContactPage;
+  tab4Root = IonicUiPage;
+
 
   constructor() {