ionic

前言 Ionic 使用的是 Capacitor，是一套可以用來將打包好的網頁包成 App 的工具，這篇將示範在 m 晶片的 MacBook 上測試編譯 ios 版本的 App，另外這篇會提到一下我編譯過程出現的問題，如果照著這篇有問題可以參考看看。 文件參考 這篇會用到以下兩篇官方文件 環境準備 建置流程 步驟 編譯環境準備 為 Ionic 專案安裝 capacitor 在專案中加入所需系統 ios / android 打開 xcode / 使用 capacitor 指令測試 Step 1 - 編譯環境準備 由於先前就有大部分要求的編譯環境了，所以這裡我會簡單帶過。 Node.js : 官網 到官網下載 mac 版 Node.js，像一般應用程式安裝方式。 homebrew: 官網 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" CocoaPods: 官網 也可以用 gem(ruby package manager)，但這邊推薦用 homebrew 安裝，因為用 gem 安裝在apple silicon mac 上安裝會有架構問題，需要另外疑難排解。 brew install cocoapods Xcode & Xcode Command Line Tools: App store 到 App store 下載 Xcode，安裝完之後因為預設不包含 Xcode Command Line Tools，需要輸入下列指令安裝。...

前言 由於專案用途需要使用到 Ionic 這個框架，這個框架可以用前端三大框架 (Angular, React, Vue)為基底進行開發很好上手，所以想把學習的過程做個筆記，這篇會從建立到運行開發環境做個介紹，編譯部分之後再寫XD 官網供參 https://ionicframework.com/ 步驟 下載 Ionic CLI 建立新的 Ionic 專案 在本機測試預覽 Step 1 - 下載 Ionic CLI 先使用 NPM 在全域安裝 Ionic CLI，這會在後面用於建立專案與運行專案使用。 npm install -g @ionic/cli Step 2 - 建立新的 Ionic 專案 輸入下列指令，然後按照 CLI 提供的步驟 ionic start # Use app creation wizard? n # => 也可以選 Y，但就會使用網頁去建立一個新的 Repo # Framework: Vue # => 選擇要使用的前端框架 # Project name: sample-ionic # => 專案名稱，隨便輸入就好~ # Starter template: tabs # 這裡他會給你四個選項，建議第一次碰 Ionic 可以選 tabs 看看一些基本的用法 選擇完各種選項之後，安裝完各種依賴後，專案就建立完成了。...