当前位置 : 主页 > 手机开发 > 其它 >

Ionic CLI使用教程指南

来源:互联网 收集:自由互联 发布时间:2021-06-12
Ionic CLI介绍 Ionic CLI是开发Ionic应用程序过程中使用的主要工具。它就像一个瑞士军刀:它在一个界面下汇集了大量工具。 CLI包含许多对Ionic开发至关重要的命令,例如 start , build ,

Ionic CLI介绍

Ionic CLI是开发Ionic应用程序过程中使用的主要工具。它就像一个瑞士军刀:它在一个界面下汇集了大量工具。 CLI包含许多对Ionic开发至关重要的命令,例如startbuildserverun。 它还包含emulateinfo等命令,这些命令在某些情况下可以提供一些帮助。

安装CLI

要安装Ionic CLI你需要先安装nodenpm,然后运行以下命令来安装最新的Ionic CLI:

注意:Ionic CLI需要Node 4.X以上的版本支持。

npm install -g ionic

在 Mac 或 Linux 平台上,你可能需要添加sudo前缀提权进行全局安装:

sudo npm install -g ionic

基本用法

最重要的命令之一是start命令,它负责创建一个新的Ionic项目。 让我们试试:

ionic start myAwesomeApp --v2

这会创建一个名为myAwesomeApp的新应用。让我们cd到这个目录然后运行另一个CLI命令:

cd myAwesomeApp
ionic info

这应该会输出你的Ionic环境信息,这对调试非常有用。最后,想要在浏览器中预览你的应用,你需要使用serve命令:

ionic serve

现在你已经了解了CLI的基础知识。 如果您喜欢使用命令行,您可以通过简单地键入ionic来查看命令和选项的完整列表。

build

build命令为特定平台构建一个应用程序。输入iosandroid将在platforms/目录生成平台特定的代码。build命令扩展于Cordova的build命令。

命令 描述 ionic build 为指定的平台构建Ionic项目 标志 描述 --nohooks -n 不要为Cordova添加默认Ionic hooks

emulate

emulate命令用于将应用程序部署到指定的平台模拟器。 您还可以通过添加--livereload选项在指定的模拟器上运行实时重新加载。实时重载功能类似于ionic serve,但是编译的混合应用程序本身正在监视其文件的任何更改,并在需要时重新加载应用程序,而不是使用标准浏览器开发和调试应用程序。这减少了不断重建应用程序以进行小更改的要求。但是,对插件的任何更改仍需要完全重建。对于实时重新加载工作,开发机和模拟器必须在同一本地网络,并且设备必须支持web sockets

命令 描述 ionic emulate 在模拟器中运行Ionic项目 标志 描述 --livereload -l 实时重新加载 --address 指定 Ip 地址 --port -p 指定端口 --livereload-port -r 实时重新加载端口 --consolelogs -c 将应用程序控制台日志输出到Ionic CLI(需要livereload) --serverlogs -s 将开发服务器日志打印到Ionic CLI(需要livereload) --debug 调试版模式 --release 发行版模式 --device --emulator --target=FOO 模拟器,设备,目标标识

info

ionic info命令打印出有关系统的Ionic环境和依赖关系的相关信息。这包括诸如你的Ionic,Cordova,Node和Xcode版本。 如果在Github上提交问题,粘贴此命令的输出可以帮助其他人更快地诊断问题。

命令 描述 ionic info 列出有关用户运行时环境的信息

platform

platform命令为您的应用程序添加一个新平台。 运行ionic platform add $platform来添加一个特定的平台,其中$platform可以是iosandroid等。

命令 描述 ionic platform 添加用于构建Ionic应用程序的目标平台 标志 描述 --noresources -r 不要添加默认的Ionic图标和启动屏幕资源 --nosave -e 不要将平台保存到package.json文件

run

run命令用于将应用程序部署到指定的平台设备。 您还可以通过添加--livereload选项在指定的设备上运行实时重新加载。实时重载功能类似于ionic serve,但是编译的混合应用程序本身正在监视其文件的任何更改,并在需要时重新加载应用程序,而不是使用标准浏览器开发和调试应用程序。这减少了不断重建应用程序以进行小更改的要求。但是,对插件的任何更改仍需要完全重建。对于实时重新加载工作,开发机和模拟器必须在同一本地网络,并且设备必须支持web sockets

命令 描述 ionic run 在连接的设备中运行Ionic项目 标志 描述 --livereload -l 实时重新加载 --address 指定 Ip 地址 --port -p 指定端口 --livereload-port -r 实时重新加载端口 --consolelogs -c 将应用程序控制台日志输出到Ionic CLI(需要livereload) --serverlogs -s 将开发服务器日志打印到Ionic CLI(需要livereload) --debug 调试版模式 --release 发行版模式 --device --emulator --target=FOO 模拟器,设备,目标标识

serve

使用ionic serve为应用程序开发和测试启动本地开发服务器。这对于桌面浏览器测试以及在连接到同一网络的设备浏览器中测试都很有用。此外,此命令启动LiveReload,用于监视文件系统中的更改。 一旦保存文件,浏览器将自动刷新。

命令 描述 ionic serve 为应用开发/测试启动本地开发服务器 标志 描述 --consolelogs -c 将应用程序控制台日志输出到Ionic CLI --serverlogs -s 将开发服务器日志打印到Ionic CLI --port -p 指定端口 --livereload-port -r 实时重新加载端口 --nobrowser -b 禁用启动浏览器 --nolivereload -d 不要实时重新加载 --noproxy -x 不要添加代理 --address 指定 Ip 地址 --all -a 让服务器侦听所有地址(0.0.0.0) --browser -w 指定启动的浏览器 --browseroption -o 启动浏览器时的参数 --lab -l 在多种屏幕尺寸和平台类型上测试您的应用 --nogulp 在服务期间禁用gulp --platform -t 指定平台类型

start

start命令用于创建一个新的Ionic项目。 使用--v2标志创建V2项目。 这将默认使用tabs模板,同时下载最新的稳定版本的Ionic。

命令 描述 ionic start 在指定的PATH中启动一个新的Ionic项目 标志 描述 --appname -a 应用程序名称 --id -i 应用程序ID --no-cordova -w 创建非Cordova需求的基本结构 --sass -s 设置项目以使用Sass CSS预编译 --list -l 列出可用的启动器模板 --io-app-id Ionic.io 平台 ID --template -t 指定启动器模版 --zip-file -z 压缩文件

generate

Ionic现在提供了一个生成器功能来为您的应用程序创建页面和服务。 这使得从基本的应用程序到完整功能的应用程序与导航更容易。

这个命令你可以这样用:

# ionic g page <PageName>
ionic g page myPage

√ Create app/pages/my-page/my-page.html
√ Create app/pages/my-page/my-page.ts
√ Create app/pages/my-page/my-page.scss

这会同时创建出 htmltsscss。不光可以创建page还可以创建provider:

ionic g provider MyData

√ Create app/providers/my-data/my-data.ts

这将使用Angular的http类创建一个带有简单http get请求的标准类。

放到最后说因为大爱这个命令,现在创建component或者provider只需回车然后喝口水!

能够创建的成员有:

  • component

  • directive

  • page

  • provider

  • pipe

  • tabs

命令 描述 ionic g 使用Ionic构建器快速创建组件

最后

Ionic CLI大部分命令都是构建于 Cordova CLI 之上的。所以掌握Ionic CLI的同时还是需要去熟悉Cordova CLI,以便在Ionic CLI撂挑子不干的时候能够让Cordova CLI帮你解决问题。

比如这次Ionic 2 RC0 ,ionic build android就撂挑子摆脸色~cordova build android仍然表现稳定。只是需要prebuild一下ionic www。

网友评论