安裝或設定

由於 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