首先需要安裝 Node.js，我們?cè)诮酉聛?lái)的安裝中需要使用到其 NPM 工具。
然后通過(guò)命令行工具安裝最新版本的 cordova 和 ionic 。默認(rèn)你已裝好了 Android Studio 、Xcode。

安裝 ionic

$ npm install -g cordova ionic

構(gòu)建ionic項(xiàng)目

命令格式：

$ ionic start [<name>] [<template>] [options]

常用創(chuàng)建命令(選擇一種模板來(lái)創(chuàng)建自己的應(yīng)用)：

• 創(chuàng)建一個(gè)空白的只有導(dǎo)航欄的項(xiàng)目
  • ionic start myApp blank
• 創(chuàng)建一個(gè)帶側(cè)邊欄的項(xiàng)目
  • ionic start myApp sidemenu
• 創(chuàng)建一個(gè)帶標(biāo)簽欄的項(xiàng)目
  • ionic start myApp tabs

模板.png

添加Android平臺(tái)

在跑 Android 端的時(shí)候需要先開(kāi)啟 Android 模擬器，介紹一種可以不用開(kāi)啟 Android Studio 直接用終端命令打開(kāi)模擬器的方法：
模擬器路徑 + -netdelay none -netspeed full -avd + 模擬器的名字
例如：
/Users/xxx/library/android/sdk/tools/emulator -netdelay none -netspeed full -avd Nexus_5X_API_26

// 添加 Android 端
ionic cordova platform add android

// build Android apk
ionic cordova build android

// 運(yùn)行 Android apk
ionic cordova emulate android

Android.png

添加iOS平臺(tái)

iOS 端不需要提前開(kāi)啟模擬器，但是要注意所有的命令中iOS中的OS必須小寫(xiě)os

//添加 iOS 端
ionic cordova platform add ios

//build ios
ionic cordova build ios

//運(yùn)行 iOS 端項(xiàng)目
ionic cordova emulate ios

iOS.png

調(diào)試

2016年12月5日開(kāi)始 Ionic Lab客戶端就被廢棄了，但是有新的輕量方法替代。

• ionic serve
cd到ionic項(xiàng)目文件夾執(zhí)行ionic serve會(huì)在http://localhost:8100/開(kāi)啟一個(gè)本地環(huán)境來(lái)預(yù)覽調(diào)試APP。但是在 UI 顯示方面Emulated Devices切換不同的平臺(tái)后需要刷新瀏覽器才能顯示對(duì)應(yīng)的平臺(tái)的效果
  

• ionic serve --lab
cd到ionic項(xiàng)目文件夾執(zhí)行ionic serve --lab會(huì)在http://localhost:8100/ionic-lab開(kāi)啟一個(gè)本地環(huán)境來(lái)預(yù)覽APP。UI 顯示方面可以同時(shí)顯示Android、iOS的效果。左邊面板上還可以直接查看官方文檔，很方便

項(xiàng)目目錄結(jié)構(gòu)解析

hooks：編譯cordova時(shí)自定義的腳本命令，方便整合到我們的編譯系統(tǒng)和版本控制系統(tǒng)中
node_modules：node各類依賴包
platforms：生成android或者ios安裝包路徑（ platforms\android\build\outputs\apk：apk所在位置）
plugins：插件文件夾，里面放置各種cordova安裝的插件
resources：android/ios 資源（更換圖標(biāo)和啟動(dòng)動(dòng)畫(huà)）
src：開(kāi)發(fā)工作目錄，頁(yè)面、樣式、腳本和圖片都放在這個(gè)目錄下
www：靜態(tài)文件
config.xml: 配置文件
package.json: node安裝模塊時(shí)的依據(jù)
tsconfig.json: TypeScript項(xiàng)目的根目錄，指定用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng)
tslint.json：格式化和校驗(yàn)typescript

• src工作目錄：
  • app：應(yīng)用根目錄
  • assets：資源目錄（靜態(tài)文件（圖片，js框架。。。）各種需要放置在此文件夾內(nèi)，不然會(huì)出錯(cuò)，（尷尬。。。）
  • pages：頁(yè)面文件，放置編寫(xiě)的頁(yè)面文件，包括：html，scss，ts。（搞事情的）
  • theme：主題文件，里面有一個(gè)scss文件，設(shè)置主題信息。
    原文看這里