零、升级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一样），可以完成前端布局。
网友评论