ionic4+vue+cordova開發混合應用

摘要

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應用。。https://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/gdutjiweij...，效果以下

web

android

ios