择要

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