安裝或設定

Created: November-22, 2018

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