Как разрабатывать мобильные приложения с помощью Vue.js

Если вы умеете писать SPA (Single Page Aplication) на Vue, то вы уже можете создавать мобильные приложения с помощью Vue.js и публиковать их в AppStore или Google Play.

Как это будет работать

Такое приложение будет работать с помощью WebView. Другими словами, в приложении будет работать встроенный изолированный браузер, который будет запускать ваш проект на Vue. А для того чтобы связываться с элементами операционной системы, например галерея, календарь, геопозиция и т.д., мы рассмотрим такой инструмент как Capacitor.

Что такое Capacitor

Capacitor можно описать как некий «мост» между JavaScript кодом и операционной системой. Посколько браузер не имеет доступ к элементами ОС, Capacitor выполняет роль посредника между браузером и ОС. Для Capacitor существует огромное количество плагинов, которые могут решить практически любую задачу в мобильной разработке. Для сборки используем инструмент Vite.

Приступим

Предположим, у нас уже есть готовый проект на Vue js, и мы хотим сделать из него приложение. Для начала нужно проект собрать, посколько Capacitor будет работать с уже собранным проектом в папке dist.

Далее перейдем в папку с проектом в терминале, и установим Capacitor:

npm install @capacitor/core @capacitor/cli

После этого выполним инициализацию приложения, запустив команду:

npx cap init

Далее нужно ввести данные нового приложения:

Ввод названия приложения

Name — название приложения.

Ввод Package ID

Package ID — уникальный ID приложения, который будет использоваться в магазинах. Например com.company.appname.

Вопрос о создании аккаунта в Ionic

Create free Ionic account? — вопрос о том, хотите ли вы создать аккаунт в Ionic для коммуникацией с сообществом. Ionic это сообщество которому принадлежит Capacitor. Если не хотите, поставьте букву «n».

После выполнения этих действий в папке с проектом появится файл capacitor.config.ts, в котором будут указаны те данные что мы указали, а также в дальнейшем в этом файле можно будет указывать дополнительные параметры, например для генерации иконки приложения.

Далее нужно установить сборщики приложения для iOS и Android платформы. Для этого используем команды:

npm install @capacitor/ios
npm install @capacitor/android

Следующим шагом нужно создать из нашего dist проекта, папки с проектами для iOS и Android платформы. Для этого выполним в терминале команды:

npx cap add android
npx cap add ios

Эти команды собирают из фронтенда папки для работы в xCode (для iOS) и в Android Studio (для Android). Теперь можно увидеть их в папке с проектом:

Структура файлов и папок приложения после установки Capacitor

Запускаем приложение

Теперь для запуска приложения понадобятся две программы: xCode и Android Studio. Если они установлены, то можно открыть уже нативный проект с помощью команд:

npx cap open android
npx cap open ios

Первая команда откроет Android Studio с проектом, а вторая откроет xCode. Теперь можно запустить приложение через эти программы на телефоне, и это будет полноценное установленное приложение.

Обновление кода

Каждый раз когда изменяем код проекта на фронтенде, нужно синхронизировать его с папками мобильных приложений. Для этого нужно выполнять команды:

npm run build
npx cap copy
npx cap sync

npm run build собирает проект в папку dist,
npx cap copy копирует файлы в папки с приложением если необходимо,
npx cap sync синхронизирует код веба с приложением.

Если нужно обновить код для конкретной платформы, то используйте комманды для конкретной оси:

npm run build
npx cap copy android
npx cap sync android

или

npm run build
npx cap copy ios
npx cap sync ios

После этого снова запускаем приложение через xCode или Android Studio.