一.使用Ionic CLI進行專案的初始化構建

1.構建專案

• 執行npm install -g cordova ionic安裝cordova和ionic外掛
• 建立一個APPionic start 專案名 tabs
  • 其中tabs是圖示形式（下方圖示）
  • ionic start 專案名 blank建立空APP
  • ionic start 專案名 sidemenu建立帶有左側menu的APP
• 啟動專案
  • 進入專案cd 專案名
  • 啟動專案ionic serve
  • 預設啟動專案在:localhost:8100

二.Ionic CLI初始化失敗時的另一種構建專案方案

• 前提：已經通過執行npm install -g cordova ionic完成安裝cordova和ionic外掛（Ionic環境），但是由於沒有網路的原因沒法對專案進行初始化
• 事先建立啟動專案，以備不時之需~

三.VSCode開啟專案外掛初始化設定

• Ionic目錄結構
  • .sourcemaps生成sourcemap相關檔案，對於後期js和css除錯相當方便
  • hooks資料夾下是cordova的說明文件
  • node_modules資料夾下是npm安裝的依賴包
  • resources資料夾下是檔案的啟動圖示、啟動圖、ios和android分開放等等
  • src資料夾下是專案的原始碼
  • www資料夾是整個專案生成之後的資料夾，供瀏覽器使用的，也可以放置到伺服器中
  • .editorconfig是編譯器的配置檔案
  • .gitignore配置git哪些檔案不被提交
  • config.xml進行整個ionic專案的配置（配置專案的入口檔案、是否支援跨域、對應的資源名稱等等）
  • ionic.config.json另外一個ionic專案的配置檔案，基本上不會用到
  • package.json是npm載入的所有的包
  • tsconfig.json是整個typescript相關的配置
  • tslint.json配置檢測規則，用於程式碼的檢測
• VSCode快捷鍵
  • ctrl+~開啟終端Terminal
• 相關外掛
  • Project Manager：專案儲存外掛
  • Bracket Pair Colorizer：括號增強外掛（配對的括號之類的符號進行彩色化標註）

四.編譯專案的方法並在IOS環境下體驗

• 執行sudo ionic cordova platform add ios新增ios平臺【新增平臺會多出一個platforms的資料夾，其中platforms.json檔案中會多出一個ios平臺】
• 修改生成專案檔案的目錄許可權：chmod -R 777 專案資料夾名【否則無法開啟對應打包的專案】
• 使用xcode開啟ios檔案專案，點選啟動，執行專案
• 真機測試與釋出需要Apple開發者賬號，但是IOS9以上的使用者可以不需要
• 如果想把專案共享給別人看
  • 普遍操作：將專案上架，等待稽核，等待上傳到Apple Store，到Apple Store下載檢視
  • 快速操作：使用ionic view【手機下載ionic view，將自己開發的專案上傳到ionic view中，別人登入時重新整理就可以看到對應專案內容，可以快速釋出與檢視，通常用作演示】
• 常見問題處理：ionicframework.com/docs/intro/deploying

五.編譯專案的方法並在Android環境下體驗

• 執行sudo ionic cordova platform add android新增android平臺[可以使用sudo ionic cordova platform ls檢視安裝過的平臺]

• 執行sudo chmod -R 777 專案資料夾名修改專案目錄許可權

• 直接使用Android Studio進行連線除錯

• 打包成apk拖入後進行測試

• 支援的版本：cordova.apache.org/docs/en/latest/guide/platforms/android

六.編譯專案的方法並在瀏覽器環境下體驗

• 執行ionic serve啟動專案
• 通過Chrome瀏覽器可以設定對應的手機型號及瀏覽器資訊進行專案檢視及除錯

七.編譯專案的方法並在微信環境下體驗

• 執行ionic cordova platform add browser新增瀏覽器平臺（為微信使用）
• 執行ionic cordova build browser編譯broswer專案生成www專案，之後部署platform/browser/www資料夾到對應的伺服器，其實就是一個靜態站點的部署過程
• 注意微信的標題title問題：微信上方還有title，下方還有title，需要對title進行相關處理