實戰使用Axure設計App,使用WebStorm開發(2) – 建立 Ionic 項目

 系列文章

實戰使用Axure設計App,使用WebStorm開發(1) – 用Axure描述需求 

實戰使用Axure設計App,使用WebStorm開發(2) – 建立 Ionic 項目  

實戰使用Axure設計App,使用WebStorm開發(3) – 構建頁面架構 

實戰使用Axure設計App,使用WebStorm開發(4) – 實現頁面UI

實戰使用Axure設計App,使用WebStorm開發(5) – 實現頁面功能

實戰使用Axure設計App,使用WebStorm開發(6) – 邁向後端

 

 

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上）