Введение в Ionic Vue

Ionic Vue: что это такое?

Что такое Ionic Vue?

Ionic Vue сочетает в себе опыт Ionic Framework с инструментами и API из Vue.js. Ionic Vue, созданный на основе недавно выпущенного Vue 3, использует преимущества новых функций Vue 3, таких как Composition API и поддержка TypeScript. Вы также можете использовать все компоненты Ionic Framework, за исключением виртуальной прокрутки.

Установка

Чтобы начать создавать приложения с помощью Ionic Vue, вам сначала необходимо установить Ionic CLI. Это можно сделать, выполнив следующую команду:

npm install -g @ionic/cli@latest

После завершения установки вы готовы начать использовать Ionic Vue!

Создание вашего первого проекта

Чтобы создать свой первый проект, запустите следующее:

ionic start {appName} {template} --type vue

Просто замените {appName} названием вашего приложения, а {template} начальным шаблоном, который вы хотите использовать для своего приложения. tabs создаст проект с простым интерфейсом с вкладками или blank приведет к пустому проекту. Также можно отключить TypeScript, удалив пакеты TypeScript npm и переименовав файлы .ts в .js (и некоторые другие изменения конфигурации).

Запустите ваше приложение

Все, что вам нужно сделать, чтобы запустить ваше приложение, - это runionic serve. Теперь давайте отметим некоторые различия между традиционным приложением Vue и приложением Ionic Vue.

Методы жизненного цикла

Поддерживаются следующие четыре метода жизненного цикла Ionic Framework: ionViewDidEnter, ionViewDidLeave, ionViewWillEnter и ionViewWillLeave.

methods: {
    ionViewDidEnter() {
      // Fired when the component routing to has finished animating.
    },
    ionViewDidLeave() {
      // Fired when the component routing to has finished animating.
    },
    ionViewWillEnter() {
      // Fired when the component routing to is about to animate into view.
    },
    ionViewWillLeave() {
      // Fired when the component routing from is about to animate.
    }
}

Маршрутизация

Маршрутизация осуществляется с помощью vue-router, но для обработки анимации Ionic Framework API маршрутизатора был расширен за счет компонента ion-router-outlet. Использование маршрутизатора почти идентично vue-router, но с другим импортом:

import { createRouter, createWebHistory } from ‘@ionic/vue-router’;

Вывод

Учитывая основные различия, которые были представлены, теперь вы готовы приступить к созданию своего первого нативного (и кроссплатформенного) приложения с помощью Vue!