ionic创建项目及目录结构

创建项目

nodejs 最新稳定版

安装ionic 和cordova

cnpm i -g ionic cordova

创建项目

cd到某个文件目录下，ionic start ionicdemo tabs，创建过程中可以按ctrl+c，再通过cnpm i，安装所需要的依赖。

运行项目

ionic serve

目录结构

package.json中的依赖存放在node_modules模块下。
src关键目录。
tab1,tab2,tab3放到tabs中，tabs放到app根模块中。

创建新的组件

ionic g page componnetname

ionic4.x是由模块组成的，多个模块无法共用一个组件，这时候就需要把组件封装成一个模块，让模块引入模块。

将组件封装成模块

• 先创建一个list模块

ionic g module module/list

• 再创建一个组件

ionic g componnet module/list

再module.ts文件中，声明组件，再export

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ListComponent } from './list.component';

@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule
  ],
  exports:[ListComponent]
})
export class ListModule { }

在其他模块中引入进行使用。

import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Tab1Page } from './tab1.page';
import { SlideModule } from '../module/slide/slide.module';
import { ListModule } from '../module/list/list.module';

@NgModule({
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    SlideModule,
    ListModule,
    RouterModule.forChild([{ path: '', component: Tab1Page }])
  ],
  declarations: [Tab1Page]
})
export class Tab1PageModule {}

重点看listModule
在页面中使用。

<ion-header>
  <ion-toolbar  color="success">
    <ion-title>
      Tab One
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
   
  <ion-button [routerLink]="[ '/news']">
    新闻
  </ion-button>
  <app-slide></app-slide>
  <app-list></app-list>
</ion-content>