Резюме
Ionic — это фреймворк, который позволяет нам разрабатывать даже мобильные приложения с использованием Интернета. До 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 также представляет кордову и конденсатор для упаковки нашего кода в приложения для Android или ios. .ionicframework.com
Используйте ionic для создания нашей среды
Установить ионные леса
npm install -g ionic
Установите Android Stuiod для компиляции кода Android
https://ionicframework.com/docs/installation/android
Установите xcode для компиляции кода ios
https://ionicframework.com/docs/installation/ios
Инициализировать проект. Используйте предоставленный шаблон, чтобы проверить, успешно ли установлена среда.
ionic start myApp blank
начать на андроид студии
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 в соответствующий каталог Android.
cp -r dist/ ./cordovawebapp/platforms/android/app/src/main/assets/www/
3) Скопируйте код каталога dist в соответствующий каталог ios
cp -r dist/ ./cordovawebapp/platforms/ios/www/