31.07.2025

Пошаговое создание мобильного приложения-рулетки на Vue 3 + Capacitor: от идеи до публикации

В этой статье:

Как создать современное Vue 3-приложение с рулеткой-рандомайзером
Как упаковать его в Android и iOS приложения через Capacitor
Как решать все реальные ошибки, возникающие по ходу
Как вносить обновления во Vue-приложение и синхронизировать их с мобильными платформами

План разработки

Создание и настройка проекта на Vue 3
Подключение Tailwind CSS и Pinia
Разработка компонента рулетки и интерфейса
Установка и настройка Capacitor
Запуск и настройка Android Studio и SDK
Запуск и настройка Xcode, CocoaPods и Ruby для iOS
Обновление приложения: как вносить правки и отправлять их в мобильные платформы

1. Создание и настройка проекта Vue 3

Установите Node.js LTS (рекомендуется >=18.x)
Создайте проект:
```
npm create vue@latest
```
Ответьте на вопросы мастера: выберите Vue 3, Pinia, TypeScript (по желанию).
Установите зависимости:
```
cd <имя_проекта>
npm install
```

2. Подключение Tailwind CSS

Установите Tailwind и инициализируйте его:

npm install -D tailwindcss@3.4.1 postcss autoprefixer
npx tailwindcss init -p

В tailwind.config.js проверьте:

module.exports = {
  darkMode: 'class',
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: { extend: {} },
  plugins: [],
}

В src/assets/main.css подключите Tailwind:

@tailwind base;
@tailwind components;
@tailwind utilities;

В src/main.ts импортируйте стили:
```
import './assets/main.css';
```

3. Настройка Pinia и структуры проекта

Pinia уже выбран при инициализации. В src/stores/rouletteStore.ts создайте store рулетки.

Структура проекта:

src/
  components/
    RouletteWheel.vue
    AddValueModal.vue
    ValueList.vue
    ThemeSwitcher.vue
  stores/
    rouletteStore.ts
  App.vue
  main.ts

4. Ключевые особенности и грабли интерфейса

Если сектора неравномерные: смещайте все углы на -90° при построении SVG-дуг!
Вращение не вокруг центра: используйте <g :transform="rotate(..., cx, cy)"> для SVG, а не CSS-transform

Тема (dark/light) не работает: класс dark должен быть на <html>, а не на <body> или #app. Пример кода:

onMounted(() => {
  isDark.value = localStorage.getItem('darkTheme') === '1';
  document.documentElement.classList.toggle('dark', isDark.value);
});

Дублирующие значения: валидируйте на этапе добавления и редактирования!

5. Упаковка приложения через Capacitor

Установите Capacitor:

npm install --save @capacitor/core @capacitor/cli

Инициализируйте Capacitor:
```
npx cap init
```
- Выберите имя приложения и package id (например, com.example.roulette)
В capacitor.config.ts пропишите:
```
webDir: "dist"
```

Установите платформы:

npm install @capacitor/android
npm install @capacitor/ios
npx cap add android
npx cap add ios

Соберите фронтенд:
```
npm run build
```
Синхронизируйте:
```
npx cap sync
```

6. Настройка Android Studio и SDK

Установите Android Studio с официального сайта.
Важная проблема: при первом запуске Android Studio не даст продолжить, пока не укажете путь к Android SDK. Если у вас нет SDK:
- Скачайте Command line tools only с официального сайта.
- Создайте структуру папок:
```
mkdir -p ~/Library/Android/sdk/cmdline-tools/latest
```
- Переместите туда содержимое архива cmdline-tools (чтобы внутри latest были bin, lib и др).
- В Android Studio укажите путь к SDK: /Users/ВАШ_ПОЛЬЗОВАТЕЛЬ/Library/Android/sdk
- Если появляется ошибка "SDK does not contain any platforms", то через терминал:
```
cd ~/Library/Android/sdk/cmdline-tools/latest/bin
./sdkmanager "platforms;android-34" "platform-tools"
          
```
- После этого снова укажите путь в Android Studio — теперь всё заработает!
Создайте эмулятор через Device Manager или подключите реальное устройство с включённой отладкой.
Откройте проект через npx cap open android или вручную — выберите папку android.

7. Подготовка iOS: Xcode, Ruby, CocoaPods

Установите Xcode через App Store и запустите его хотя бы раз.

Выполните:

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

Установите Ruby через Homebrew (а не используйте системный!):
```
brew install ruby
```
Добавьте в ~/.zshrc:
```
export PATH="/usr/local/opt/ruby/bin:$PATH"
```
После чего:
```
source ~/.zshrc
ruby -v  # Должно быть 3.x.x
```
Установите CocoaPods:
```
gem install cocoapods
```
Проверьте:
```
pod --version
```
Если видите ошибки, удалите старые gem'ы и убедитесь, что используете именно brew-ruby.

Выполните в папке ios:

cd ios
pod install
cd ..
npx cap sync ios
npx cap open ios

Если в будущем появится ошибка "can't find gem cocoapods", просто выполните:

gem install cocoapods

или повторите добавление brew-ruby в PATH.

8. Как обновлять приложение после изменения Vue-кода

Вносите изменения в Vue-проект (компоненты, стили, логику).
Соберите новый билд:
```
npm run build
```
Синхронизируйте с платформами:
```
npx cap sync
```
Откройте проект:
```
npx cap open android
npx cap open ios
```
Соберите и запустите через Android Studio или Xcode.
Для публикации обновления — соберите релизный APK/AAB (Android) или архив ipa (iOS) и загрузите в сторах.

Весь процесс обновления:
npm run build → npx cap sync → открыть и собрать проект в IDE.

9. Как собрать установочные файлы APK (Android) и IPA (iOS)

После того, как приложение собрано и синхронизировано с платформами, вы можете получить настоящие установочные файлы.

Android: сборка и получение APK/AAB

Соберите свежий билд Vue-приложения:
```
npm run build
npx cap sync android
```
Откройте проект в Android Studio:
```
npx cap open android
```
или вручную откройте папку android через File → Open...
Соберите APK или AAB:
- В верхнем меню Android Studio выберите:
  Build → Build Bundle(s) / APK(s) → Build APK(s)
  или
  Build Bundle(s) / APK(s) → Build Bundle (AAB)
- После сборки появится кнопка “Locate” — нажмите, чтобы открыть папку с app-release.apk или app-release.aab (обычно это android/app/build/outputs/apk/release/).
Установите APK на устройство:
- Отправьте файл себе на телефон и откройте его.
- Или установите через ADB:
  adb install path/to/app-release.apk
Примечание: APK из release-сборки подписан debug-ключом. Для публикации в Google Play потребуется отдельная подпись.

iOS: сборка IPA через Xcode

Соберите и синхронизируйте проект:
```
npm run build
npx cap sync ios
npx cap open ios
```
Выберите целевое устройство в Xcode:
- Вверху слева в Xcode выберите эмулятор или подключённый iPhone.
Установите приложение на устройство:
- Убедитесь, что в Target → Signing & Capabilities выбран ваш Apple ID.
- Нажмите Run (▶️) — приложение установится на iPhone.
Соберите архив IPA для публикации или передачи:
- В Xcode: Product → Archive (для релизной сборки).
- В появившемся окне Organizer нажмите Distribute App → Development (для теста) или App Store Connect (для публикации).
- Следуйте инструкциям для экспорта .ipa.
Примечание: Установить IPA напрямую на iPhone можно только через Xcode или через TestFlight (для App Store), либо подписав файл сторонней утилитой (Diawi, AltStore и др).

Для публикации в Google Play и App Store требуются аккаунты разработчика и релизная подпись.
Для тестирования на своих устройствах достаточно APK и IPA, собранных как указано выше.

Заключение

Теперь вы знаете, как создать современное Vue-приложение, упаковать его для Android и iOS с помощью Capacitor, решить все типовые проблемы (SDK, Ruby, CocoaPods), и как быстро вносить обновления!
Если у вас остались вопросы по публикации в Google Play или App Store, или по подключению нативных возможностей — пишите, и я дополню статью!