摘要

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/
複製程式碼

具體程式碼可參考https://github.com/gdutjiweijin/webapp，效果如下

web

android

ios