VueとCapacitorでモバイルアプリを構築する

このチュートリアルでは、VueのWebアプリケーションをCapacitorを使用してネイティブモバイルアプリケーションに変換するプロセスをガイドします。オプションで、Konsta UIというTailwind CSSベースのモバイルUIライブラリを使用してUIを強化することもできます。

Capacitorについて

Capacitorは、Webプロジェクトに簡単に統合できるゲームチェンジャーです。アプリケーションをネイティブモバイルアプリケーションに変換し、XcodeとAndroid Studioのプロジェクトを生成し、JavaScriptブリッジを使用してネイティブデバイスの機能にアクセスすることができます。

Vueアプリを準備する

最初に、次のコマンドを実行して新しいVueアプリを作成してください。

vue create my-app
cd my-app
npm install

ネイティブモバイルデプロイ用にVueアプリを準備するには、プロジェクトをエクスポートする必要があります。プロジェクトにスクリプトを追加してください。 パッケージ.json Vue プロジェクトをビルドおよびコピーするファイル:

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

コマンドを実行した後、プロジェクトのルートディレクトリ内に新しいフォルダが表示されるはずです。このフォルダは、後で__CAPGO_KEEP_0__によって使用されます。 build Capacitor を Vue アプリに追加する dist folder in your project’s root directory. This folder will be used by Capacitor later.

Adding Capacitor to Your Vue App

コアパッケージとiOSおよびAndroidプラットフォームの関連パッケージをインストールしてください。

Install the Capacitor CLI as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.
この時点で、iOS
Add the platforms, and Capacitor will create folders for each platform at the root of your project:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

__CAPGO_KEEP_0__は未定義です __CAPGO_KEEP_0__は未定義です と アンドロイド Vueプロジェクト内のフォルダ。

Update the capacitor.config.json ファイルを更新して、 webDir をビルドコマンドの結果に設定してください。

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

今、VueプロジェクトをビルドしてCapacitorと同期することができます。

npm run build
npx cap sync

Build and Deploy Native Apps

iOSアプリを開発するには、Xcodeがインストールされている必要があります。また、アンドロイドアプリを開発するには、Android Studioがインストールされている必要があります。さらに、iOSの場合、Apple Developer Programに登録し、アンドロイドの場合、Google Play Consoleに登録する必要があります。アプリストアにアプリを配布するには必要です。

両方のネイティブプロジェクトを開くには、Capacitor CLIを使用してください。

npx cap open ios
npx cap open android

Android StudioまたはXcodeを使用してデバイスにアプリをデプロイします。

Capacitor Live Reload

Capacitorアプリを使用して、特定のネットワーク上のURLからコンテンツを読み込ませて、モバイルデバイス上でリアルタイムリロードを有効にします。

ローカルIPアドレスを確認し、ファイルに正しいIPアドレスとポート番号を設定してください: capacitor.config.ts 変更を適用するには、nativeプロジェクトにコピーしてください:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

Vueアプリを更新すると、アプリは自動的にリロードされ、変更が表示されます。

npx cap copy

__CAPGO_KEEP_0__ プラグイン

Capacitor プラグインをインストールし、Share プラグインなどを使用して、Vueアプリにプラグインを組み込むことができます:

Install a Capacitor plugin, such as the Share plugin, and use it in your Vue app:

npm i @capacitor/share

新しいプラグインをインストールした後は、を実行してください: share() __CAPGO_KEEP_0__はCapgoのアプリです。

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

__CAPGO_KEEP_0__はCapacitorのプラグインです。 sync デバイスにアプリを再デプロイするコマンドを実行してください:

npx cap sync

Konsta UIを追加する

__CAPGO_TARGET_LANGUAGE__でVueアプリにKonsta UIを使用するには、すでにTailwindがインストールされている必要があります。パッケージをインストールするには: __CAPGO_TARGET_LANGUAGE__でVueアプリにKonsta UIを使用するには、パッケージをインストールし、 tailwind.config.js ファイルを修正してください。

npm i konsta

コンポーネントをファイルの App に Wrap してください。 pages/_app.vue Vueコンポーネントを使用して、VueページでKonsta UIコンポーネントを使用してください。

まとめ

Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するのに適したオプションです。Capgoを追加すると、さらに簡単にアプリにライブアップデートを追加できます。ユーザーは常に最新の機能とバグ修正にアクセスできます。

Capgoがアプリをより速く、より良く作るのにどのように役立つかを学びましょう。 sign up for a free account today.

Keep going from Building Mobile Apps with Vue and Capacitor

If you are using Building Mobile Apps with Vue and Capacitor to plan native media and interface behavior, connect it with Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player capgo/capacitor-video-playerの実装詳細について Using @capgo/capacitor-native-navigation Using @capgo/capacitor-native-navigationのネイティブ機能について