Vue と Capacitor を使用したモバイルアプリ開発

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

Capacitorについて

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

Vueアプリを準備する

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

vue create my-app
cd my-app
npm install

ネイティブモバイルの展開に準備するには、プロジェクトをエクスポートする必要があります。package.jsonファイルにスクリプトを追加して、Vueプロジェクトをビルドしてコピーしてください: package.jsonファイルにスクリプトを追加してください。 コマンドを実行した後、プロジェクトのルートディレクトリに新しいフォルダが表示されるはずです。このフォルダは後で__CAPGO_KEEP_0__によって使用されます。

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

__CAPGO_KEEP_0__をVueアプリに追加する build Vueウェブアプリをネイティブモバイルコンテナに変換するには、次の手順に従ってください: dist Capacitor __CAPGO_KEEP_1__を開発依存モジュールとしてインストールし、プロジェクト内でセットアップしてください。名前とバンドルIDのデフォルト値を受け入れてください。

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

プラットフォームを追加し、__CAPGO_KEEP_0__はプロジェクトのルートディレクトリに各プラットフォーム用のフォルダを作成します:

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.
Install the core package and the relevant packages for the iOS and Android platforms.
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の設定が完了していることを確認してください。 iOS と android フォルダがVueプロジェクト内に作成されました。

__CAPGO_KEEP_0__.config.jsonファイルを更新してください。 capacitor.config.jsonファイルのwebDirをビルドコマンドの結果に設定してください。 CapgoとVueプロジェクトを同期することができます。 Capgoを使用してVueプロジェクトをビルドし、__CAPGO_KEEP_0__に同期してください。 Capgoを使用してネイティブアプリをビルドしてデプロイしてください

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

Now, you can build your Vue project and sync it with Capacitor:

npm run build
npx cap sync

Capgoを使用してネイティブアプリをビルドしてデプロイしてください

iOSアプリを開発するには、Xcodeをインストールし、Androidアプリを開発するにはAndroid Studioをインストールする必要があります。また、iOSの場合はApple Developer Programに登録し、Androidの場合は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 変更を適用するには、変更をネイティブプロジェクトにコピーしてください。

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

__CAPGO_KEEP_0__ share() アプリ内で使用する機能:

<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>

新しいプラグインをインストールした後、デバイスにアプリを再デプロイするには、以下のコマンドを実行してください: sync コマンドを実行し、デバイスにアプリを再デプロイしてください:

npx cap sync

Konsta UIを追加する

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

npm i konsta

Konsta UI Vueコンポーネントを使用するには、以下のファイルを修正してください: App Konsta UI Vueコンポーネントを使用するには、以下のファイルを修正してください: pages/_app.vue Konsta UI Vueコンポーネントを使用するには、以下のファイルを修正してください:

まとめ

Capacitorは、既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するための素晴らしいオプションです。Capgoを追加すると、さらにアプリにリアルタイム更新を追加し、ユーザーが常に最新の機能とバグ修正にアクセスできるようにすることができます。

Capgoを使用して、より速く、より優れたアプリを構築する方法を学びましょう。無料アカウントに登録する今日。

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