Ionic一级基础页面的建立&添加组件

零、升级Ionic环境（node&ionic）

1. 使用最新稳定版node

进入node官网（https://nodejs.org/zh-cn/）查看最新版node版本号并安装

nvm install v版本号

2. 安装最新版ionic

npm install -g ionic

一、安装Visual Studio Code和插件

1. 安装软件

进入官网（https://code.visualstudio.com/），下载安装包安装即可。

2. 安装插件（6+2个）

Ionic常用6个插件

Ionic补充2个插件

二、新建一级基础页面

ok为新建页面

1. 通过命令新建页面

cd AppName

ionic g page page_name

2. 在配置文件中注册页面

/project_path/src/app/app.module.ts

@NgModule({

  declarations: [

    ……

    YourPage,

  ],

  ……

  entryComponents: [

    ……

    YourPage,

  ]

三、一级基础页面页面与App建立、修改联系

如新增加页面“ok”，tabs.html增加下图👇倒数第二行代码。

图标库网址：https://ionicframework.com/docs/ionicons/

 tabs.html

如新增加页面“ok”，tabs.ts增加下图👇红框所示代码。

tabs.ts

四、为一级基础页面增加组件

组件网址：https://ionicframework.com/docs/components/

直接复制对应代码到html文件即可。

Ionic组件的使用

html文件

添加其他组件同理（基本和html一样），可以完成前端布局。