文章出處

系列文章

Ionic是什么? Ionic是目前最有潛力的一款 HTML5 手機應用開發框架。通過 SASS 構建應用程序，它提供了很多 UI 組件來幫助開發者開發強大的應用。它使用 JavaScript MVVM 框架和 AngularJS 來增強應用。提供數據的雙向綁定，使用它成為 Web 和移動開發者的共同選擇。

Ionic 在發布了1.0版本以后，被越來越多的關注和支持，社區也十分的活躍。本文將繼續上篇，使用Ionic 框架來開發應用。

1. 首先安裝NodeJs：https://nodejs.org/ 在NodeJs 網站上找到自己平臺的安裝包，執行安裝即可。

2. 安裝 Ionic：http://www.ionicframework.com/getting-started/ 執行命令。

npm install -g cordova ionic

在Mac下安裝的時候，可能會出現沒有權限的問題。提升權限執行 sudo 即可：

sudo npm install -g cordova ionic

Ionic 有三種默認項目模板：
i). blank –> 空工程模板，
ii). tabs -> 分頁Tabs工程模板
iii). sidemenu -> 左邊菜單工程模板

3. 使用 ionic start DeliveryApp blank 創建這個 App應用，DeliveryApp 是咱們這個實例的項目名稱。

ionic start DeliveryApp blank

4. 運行 ionic serve 看一下在網頁中的模擬效果。

ionic serve

5. 給這個應用添加發布平臺，這里添加了 android 平臺和 ios 平臺。

cordova platform add android

cordova emulate android

cordova platform add ios

ionic emulate ios

到這里 ionic 就搭建完成了。下一步下載 WebStorm，使用WebStorm作為開發的IDE吧。

6. WebStorm 開發環境

WebStorm下載地址：https://www.jetbrains.com/webstorm/ 下載并安裝 WebStorm 安裝完成后，使用 WebStorm 打開文件夾 DeliverApp。

截止到現在基于 ionic 的工程搭建好了，開發需要使用的 WebStorm 弄好了。下篇我們可以開始按照 Axure 里的需求開發每個頁面了。（本文最終完成的工程代碼會放在 github上）