安装或设置

由于 Ionic 2 每天都在变得越来越好,请随时查看 官方文档 以了解最新的变化和改进。

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

1.安装 Ionic 2

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

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

$ 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 计算机上工作,因为你需要 cocoa 框架才能为 ios 构建,如果是这样的话,你首先需要通过运行将该平台添加到 cordova 以下命令:

$ 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 应用程序!

Ionic 也有实时重装。因此,如果你要开发应用程序并查看模拟器/设备上的实时更改,可以通过运行以下命令来执行此操作:

对于 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