共计 1509 个字符，预计需要花费 4 分钟才能阅读完成。
摘要
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
