摘要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/android1， ionic cordova prepare android2， ionic cordova run android -l在xcode上启动1，ionic cordova prepare ios2, ionic cordova run ios -l自己来搭建环境代码可见 https://github.com/gdutjiweijin/webapp适应vue-cli脚手架来搭建vue基础基础代码1， npm install –global vue-cli2， vue init webpack webapp3， cd webapp4, yarn install5, 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 cordovawebapp2,cordova platform add android3,cordova platform add ios把我们代码放入到cordova目录1）打包我们项目代码 npm run build2） 把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…，效果如下webandroidios