摘要
ionic是可以讓我們使用web開發即使來移動應用的框架。ionic4之前，ionic只能和angular搭配使用，ionic4後把ionic抽離成四個版本，@ionic/core，@ionic/angular，@ionic/react，@ionic/vue來滿足更多開發者的需求，但是@ionic/vue和@ionic/react還處於內部測試階段。如果你熟悉angular可以直接使用@ionic/angular開發，但如果你熟悉使用react或vue並且也想使用ionic，可以使用@ionic/core版本，本文就以@ionic/core + vue 來說明這兩者如何結合使用。除此之外ionic還引入cordova和capacitor來對把我們程式碼打包成安卓或ios應用。。ionicframework.com
使用ionic來搭建我們環境
安裝ionic腳手架
npm install -g ionic
複製程式碼安裝androd stuiod來編譯android程式碼
https://ionicframework.com/docs/installation/android
複製程式碼安裝xcode來編譯ios程式碼
https://ionicframework.com/docs/installation/ios
複製程式碼初始化專案 用提供的模版為來測試環境是否已經安裝成功
ionic start myApp blank
複製程式碼在android studio上啟動
https://ionicframework.com/docs/building/android
1， ionic cordova prepare android
2， ionic cordova run android -l
複製程式碼在xcode上啟動
1，ionic cordova prepare ios
2, ionic cordova run ios -l
複製程式碼自己來搭建環境
程式碼可見 https://github.com/gdutjiweijin/webapp
複製程式碼適應vue-cli腳手架來搭建vue基礎基礎程式碼
1， npm install --global vue-cli
2， vue init webpack webapp
3， cd webapp
4, yarn install
5, yarn run dev
複製程式碼引入ionic@core
在index.html上加入
<link href="https://unpkg.com/@ionic/core@4.0.0-beta.13/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.13/dist/ionic.js"></script>
複製程式碼在main.js加入
Vue.config.ignoredElements = [/^ion-/];
複製程式碼初始化cordova專案
1,cordova create cordovawebapp
2,cordova platform add android
3,cordova platform add ios
複製程式碼把我們程式碼放入到cordova目錄
1）打包我們專案程式碼 npm run build
2） 把dist目錄程式碼拷貝到安卓對應目錄上
cp -r dist/ ./cordovawebapp/platforms/android/app/src/main/assets/www/
複製程式碼3）把dist目錄程式碼拷貝到ios對應目錄上
cp -r dist/ ./cordovawebapp/platforms/ios/www/
複製程式碼