ionic2 安装或设置

示例

由于Ionic 2每天都在变得越来越好,因此请始终查看官方文档以跟踪最新的更改和改进。

先决条件:您将需要NodeJS才能构建Ionic 2项目。您可以在此处下载并安装节点,并在此处了解有关npm和Ionic 2使用的软件包的更多信息。


1.安装Ionic 2

与Ionic 1一样,您可以使用Ionic CLI或GUI在浏览器中快速构建和测试应用程序。它甚至具有与Ionic 1应用程序一起使用的所有功能,因此您无需更改任何内容!

要使用Ionic 2,只需从npm安装ionic:

$ npm install -g ionic

如果出现EACCES错误,请按照此处的说明为节点提供所需的权限。

2.创建您的第一个应用

安装CLI后,运行以下命令启动您的第一个应用程序:

$ ionic start MyIonic2Project

默认情况下使用选项卡模板,但是您可以通过传递标志来选择另一个模板。例如:

$ ionic start MyIonic2Project tutorial
$ cd MyIonic2Project
$ npm install

这将使用教程模板。

要运行您的应用,请进入您的项目目录并运行ionic serve -lc:

$ ionic serve -lc

-l激活页面的实时重新加载,-c显示控制台日志。如果您在构建应用程序时遇到问题,请确保package.json与ionic2-app-base中的匹配

您可以在浏览器中直接使用新应用程序!

3.构建设备

您还可以在物理设备或设备仿真器上构建新应用。您将需要Cordova才能继续。

要安装Cordova,请运行:

$ npm install -g cordova

请查看用于构建iOS应用程序的iOS模拟器文档(注意:您无法在除OSX之外的任何操作系统上构建至iOS设备或模拟器),或查看Genymotion文档以构建Android应用程序。

在iOS设备上运行:

要构建iOS应用,您需要在OSX计算机上工作,因为您将需要可可框架才能针对ios进行构建,如果是这种情况,您首先需要通过运行以下命令:

$ ionic cordova platform add ios

您将需要Xcode才能编译到iOS设备。

最后,使用以下命令运行您的应用程序:

$ ionic cordova run ios

在Android设备上运行:

Android的步骤几乎相同。首先,添加平台:

$ ionic cordova platform add android

然后安装Android SDK,使您可以编译到Android设备。尽管Android SDK附带了一个模拟器,但速度确实很慢。Genymotion更快。安装后,只需运行以下命令:

$ ionic cordova run android

就是这样!祝贺您构建了第一个Ionic 2应用程序!

离子也有实时重装。因此,如果您要开发应用程序并查看在模拟器/设备上实时进行的更改,则可以通过运行以下命令来做到这一点:

对于iOS:

$ ionic cordova emulate ios -lcs

请注意,在iOS 9.2.2上,livereload不起作用。如果要使用livereload,请config.xml添加以下内容来编辑文件:

<allow-navigation href="*"/>

然后在<platform name="ios">:

<config-file parent="NSAppTransportSecurity" platform="ios" target="*-Info.plist">
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
</config-file>

对于Android:

$ ionic cordova run android -lcs

这些l代表实时重载,c控制台日志和s服务器日志。这将使您查看执行期间是否有任何错误/警告。

Windows版

如果要为Windows构建项目,则需要在Windows计算机上工作。首先,通过运行以下命令将Windows平台安装到ionic2项目中:

$ionic cordova platform add windows

然后只需运行以下命令:

$ionic cordova run windows

在浏览器中运行

$ionic serve

用于chrome浏览器检查设备。(在chrome浏览器的地址栏中输入)

chrome://inspect/#devices