ionic4 入门 (二) 创建项目

创建ionic 项目

使用 ionic start app blank 新建一个空白的项目
图片
使用 ionic serve 启动服务
图片可以看到关于启动之后的样式
打开文件, 文件夹自动包含了 home ts html scss ..
12
并且在 app-routing.module.ts 里面自动包含了home的路由 home
创建tabs 底部导航栏 ionic g page tabs 会自动在app-routing.module.ts 里面自动包含 tabs 路径,
在 tabs.page.html 里面, 创建底部导航栏

<ion-tabs>
  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="home">
      <ion-icon name="home"></ion-icon>
      <ion-label>首页</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.ts 里面配置路由

const routes: Routes = [
  {
    path: '',
    component: TabsPage,
    children: [
      {
        path: 'home', children: [
        {
          path: '',
          loadChildren: '../home/home.module#HomePageModule',
          pathMatch: 'full'
        }
        ]
      },
      {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs/home',
    pathMatch: 'full'
  }
];