Ionic移动app开发:使用CLI命令添加页面

6 篇文章 0 订阅

Ionic是以CLI为开发工具的hyrd app开发框架,在整合开发过程中CLI随处可见,现在使用CLI进行页面的创建

注意
确保安装以下环境

  • Node 6 LTS
  • NPM 3+

1.安装 ionic

npm install -g ionic@latest

2.创建新的项目

ionic start zmApp

3.启动项目

ionic serve

4.添加新的页面

ionic generate type Name –options

  • type 类型 eg. component directive page pipe provider tabs
  • name 名称
  • options
    –no-module 不产生Ng module组件
    –constants 创建一个lazy-loaded page文件

这里写图片描述

ionic 2.0 新增页面文件
├── contact.html 页面html结构
├── contact.scss sass style
└── contact.ts TypeScript 代码

inonic 3.0 新增页面文件
.
├── contact.html
├── contact.module.ts
├── contact.scss
└── contact.ts

5.修改页面引用相关内容

这里写图片描述
6.新增Tab选项

  • tabs.ts文件

这里写图片描述

-tabs.html
这里写图片描述

7.效果

这里写图片描述

此外,在CLI新增页面后,需要Ctr+C,然后重新运行才能生效

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值