安裝Ionic CLI套件

我們可以使用npm來安裝Ionic的相關套件
npm install -g @ionic/cli native-run cordova-res
  • native-run：根據官方所描述這是讓設備和模擬器（simulators或emulators）運行本機二進製文件的實用程序
  • cordova-res：用於生成本機應用程序圖標和啟動畫面
安裝完成後可以輸入以下指令確認Ionic的版本號
ionic -v


VSCode上也有提供延伸模組套件讓我們在VSCode上開發更便利，詳細的功能可以【點我前往參考】




建立Ionic專案

這裡我們選擇使用Angular作為專案開發，我們直接使用Ionic CLI來建立Ionic專屬Angular的專案
💡 雖然是Angular但不要用ng new指令來建立哦！
ionic start my-first-app tabs --type=angular --capacitor
  • tabs：預設模板
    💡 內建預設的模板有以下：
           tabs - 包含tabs框架的模板
           sidemenu - 包含側邊欄框架的模板
           blank - 空白的模板
  • --type：指定框架
    💡 Ionic支援React、Vue、Angular三大前端框架
  • --capacitor：設定原生平台溝通的預設程序
    💡 目前我知道的有Capacitor、Cordova
2023/05/26 補充：
在Ionic 7.1.1時建立專案會多一個選項，可以選擇專案是NgModule或是Standalone的方式哦！


建立專案的時候會問要不要建立Ionic的帳號，這裡就自由決定要不要建立囉！



添加Android/IOS（選擇性）

專案建立完成後如果是行動裝置專案開發就需要添加平台識別
ionic cap add android
ionic cap add ios
💡 cap也可以是capacitor，cap好處是不用記這麼多個字XD



修改capacitor.config.ts內容

如果你的專案是需要發佈到Google商店或是APP Store的話這裡的內容很重要！一定要記得在編譯之前就做好修改以避免日後的麻煩
  • appId：APP套件ID
  • appName：APP的名稱（顯示在手機桌面Icon底下的那個）
Config裡面還有很多可以設定，有興趣的可以【點我前往】參考



執行Ionic專案

專案都設定完成之後接著一樣使用Ionic CLI的指令執行專案，等待命令執行和編譯後就會自己打開瀏覽器，由於我們一開始建立專案的時候下了「tabs」的預設樣式因此系統直接幫你建置好一個有模有樣的外觀了！
ionic serve
💡 和ng serve一樣都有個「serve」只差在命令改成使用Ionic CLI



執行Ionic - Android/Ios專案

💡 若要編譯Android需要建置Andoird的開發環境
我們成功用瀏覽器執行Ionic專案後接著來執行Android/Ios，我們一樣使用Ionic CLI的指令，等待執行完成後會自動開啟Android Studio並且等待編譯後就可以執行
ionic cap build android



編譯完成之後會在此路徑輸出一個app-debug.apk
my-first-app\android\app\build\outputs\apk\debug

💡 若要編譯Ios需要Mac環境和XCode工具
ionic cap build ios




Ionic - Live Reload功能

最後介紹一個Ionic非常實用的一個功能「Live Reload」，中文的話不知道臺灣是翻譯成什麼（Google翻譯是：實時重新加載？），這個功能可以實現檢測到應用程序更改時重新加載瀏覽器或WebView，詳細資訊可以【點我前往參考】
Android
ionic cap run android -l --host=xxx.xxx.xxx.xxx
Ios
ionic cap run ios -l --host=xxx.xxx.xxx.xxx
  • -l：開啟Live Reload功能
  • --host：Live Reload監聽的主機地址




2023/1/6 補充說明

tsconfig.json裡面可以設定es的版本，範例設定「es2020」則Android系統最低限制必須是「Android R」以上才可以運行，否則APP會無法執行哦！