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'
}
];
