Mit Vue und Capacitor mobile Apps erstellen

In diesem Tutorial werden wir Sie durch den Prozess der Umwandlung einer Vue-Web-Anwendung in eine native mobile App führen, die mit Capacitor erstellt wurde. Sie können auch Capgo Native Navigation und Transitions hinzufügen, um eine native mobile Atmosphäre zu schaffen, und tailwind-capacitor für sichere Bereiche verwenden.

Über Capacitor

Capacitor ist ein revolutionärer Werkzeug, das es Ihnen ermöglicht, es leicht in jedes Web-Projekt zu integrieren und Ihre Anwendung in eine native mobile App umzuwandeln. Es generiert native Xcode- und Android Studio-Projekte für Sie und bietet Zugriff auf native Gerätefeatures wie die Kamera über eine JavaScript-Brücke.

Vorbereitung Ihrer Vue-Anwendung

Zuerst erstellen Sie eine neue Vue-Anwendung, indem Sie den folgenden Befehl ausführen:

vue create my-app
cd my-app
npm install

Um Ihre Vue-Anwendung für die native mobile Bereitstellung vorzubereiten, müssen Sie Ihr Projekt exportieren. Fügen Sie ein Skript in Ihrem package.json Datei hinzu, um das Vue-Projekt zu bauen und zu kopieren:

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

Nachdem Sie den build Befehl ausgeführt haben, sollten Sie ein neues dist Ordner in Ihrem Projektverzeichnis sehen. Dieser Ordner wird später von Capacitor verwendet.

Capacitor in Ihre Vue-Anwendung hinzufügen

Um Ihre Vue-Web-App in einen nativen mobilen Container umzuwandeln, folgen Sie diesen Schritten:

1. Installieren Sie das Capacitor CLI als Entwicklungszuwendung und konfigurieren Sie es innerhalb Ihres Projekts. Akzeptieren Sie die Standardwerte für Name und Bundle-ID während der Konfiguration.

2. Installieren Sie das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.

3. Fügen Sie die Plattformen hinzu, und Capacitor wird Ordner für jede Plattform am Root Ihres Projekts erstellen:

# 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

Sie sollten nun neue iOS und android Ordner in Ihrem Vue-Projekt sehen.

Aktualisieren Sie das capacitor.config.json Datei, um die webDir Zum Ergebnis Ihrer Build-Befehlsausgabe:

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

Jetzt können Sie Ihr Vue-Projekt erstellen und es mit Capacitor synchronisieren:

npm run build
npx cap sync

Erstellen und Bereitstellen von nativen Apps

Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert und für Android-Apps Android Studio. Darüber hinaus müssen Sie sich im Apple Developer Programm für iOS und im Google Play Console für Android anmelden, um Ihre App im App Store zu verteilen.

Verwenden Sie die Capacitor CLI-Tools, um beide native Projekte zu öffnen:

npx cap open ios
npx cap open android

Bereitstellen Sie Ihre App auf einem verbundenen Gerät mithilfe von Android Studio oder Xcode.

Capacitor Live Reload

Aktivieren Sie das Live-Reload auf Ihrem Mobilgerät, indem Sie die Capacitor-App die Inhalte von einer bestimmten URL auf Ihrem Netzwerk lädt.

Finden Sie Ihre lokale IP-Adresse und aktualisieren Sie das capacitor.config.ts Dokument mit der richtigen IP-Adresse und Port:

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;

Anwenden Sie diese Änderungen, indem Sie sie in Ihr natives Projekt übertragen:

npx cap copy

Now, your app will automatically reload and show changes when you update your Vue app.

Mit Capacitor-Plugins

Installieren Sie ein Capacitor-Plugin, wie z.B. das Share-Plugin, und verwenden Sie es in Ihrer Vue-Anwendung:

npm i @capacitor/share

Importieren Sie das Paket und rufen Sie die share() Funktion in Ihrer Anwendung auf:

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

Nachdem Sie neue Plugins installiert haben, führen Sie den sync Befehl aus und deployen Sie die App erneut auf Ihrem Gerät:

npx cap sync

Als nächstes können Sie die App so gestalten, dass sie sich auf iOS und Android nativer anfühlt, indem Sie Capgo-Navigation und -Übergänge verwenden und häufige iOS-Anzeigefehler, die zu horizontaler Überlauf oder gekürzten sicheren Bereichen führen, beheben.

Natürliche Benutzeroberfläche mit Capgo-Native Navigation und -Übergängen

Ich habe in den letzten Jahren mit Ionic gearbeite, um cross-plattformische Anwendungen zu erstellen, aber die Integration mit Vue ist hackig und selten wertvoll, wenn Sie bereits über Tailwind CSS.

Für eine nativ mobile Atmosphäre in einer Vue + Capacitor App verwenden Sie Capgo-Plugins anstelle von web-basierten UI-Kits wie Konsta UI:

• @capgo/capacitor-native-navigation — nativere Navigation, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Style auf Android. Ihre Vue-Router behält die Routenstatus; der Plugin besitzt die native Chrome.
• @capgo/capacitor-transitions — Ionic-Style-Seitenübergänge und iOS-Rückwärts-Schleuder im WebView-Schicht ohne Ionic-UI zu übernehmen.

Installieren Sie beide:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Konfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Webinhalte die native Balken respektieren:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Rendern Sie eine Liquid Glass-Tastenleiste (iOS verwendet die Systemeigene Rendering; Android verwendet eine verschwommene WebView-Hintergrund):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

Fügen Sie native Seitenübergänge in Ihrem App-Shell hinzu:

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

Umgeben Sie die gerouteten Seiten mit cap-router-outlet, cap-page, und cap-contentund anrufen setDirection('forward') oder setDirection('back') Bevor Sie navigieren. Duplizieren Sie keine Web-Ober- oder -Unterflächen, wenn native Navigation diese Ober- oder Unterflächen besitzt.

Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.

Sichere Bereiche mit Tailwind

Für Gerätesichere Bereiche in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als tailwind-capacitor auf npm). Es bietet safe-areas Nutzungshilfen und andere Capacitor-freundliche Tailwind-Plugins:

bun add -D tailwind-capacitor

In src/assets/main.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Verwenden Sie Nutzungsanweisungen wie pt-safe, pb-safe, und px-safe anstatt sie manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Vue-Einrichtung fehlt, env(safe-area-inset-*) Öffnen Sie einen PR auf __CAPGO_KEEP_0__ open a PR on GitHub.

Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, fügen Sie mehr

oder passen Sie die Viewport-Tags alleine normalerweise nicht aus. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird

Fügen Sie den Viewport-Metatag in

Fixing iOS Layout Issues (Viewport, Safe Area, and Horizontal Overflow) index.html innerhalb <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Das iOS-Sicherheitsbereich handhaben, beginnend bei nur einem Root-Wrapper

Erstellen Sie ein einzelnes App-Shell und fügen Sie dort den Sicherheitsbereich-Puffer an — nicht in mehreren verschachtelten Komponenten:

html,
body,
#app {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Alle Seite-Inhalte innerhalb .app-shellVerwenden Sie . Doppelte Sicherheitsbereich-Puffer in Kopfzeilen, Modalen und Layout-Wrapper machen die Benutzeroberfläche oft gekürzt oder zu groß aus.

Mit @capgo/tailwind-capacitorkönnen Sie denselben Puffer mit Hilfsmitteln wie pt-safe pb-safe px-safe auf diesem einzelnen Shell ausdrücken.

Setzen Sie Capacitor iOS contentInset auf never erst

In capacitor.config.ts, bevorzugt native Eingriff deaktiviert und lasse CSS (oder Native Navigation’s) contentInsetMode: 'css') die sichere Fläche besitzen:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist',
  ios: {
    contentInset: 'never',
  },
};

Mischen Sie Capacitor’s automatische Inhalts-Einrückung mit CSS env(safe-area-inset-*) padding ist eine häufige Ursache für doppelte Abstände.

Finden Sie das überlaufende Element

Der übliche Täter ist ein Element, das verwendet 100vw, Tailwind w-screen, eine feste Pixel-Breite oder eine große min-width.

In Safari Web Inspector, führen Sie aus:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Mit Tailwind ersetzen Sie w-screen mit w-full Wenn möglich. Viele horizontale Überlaufprobleme kommen von 100vw / w-screendoppeltem sicheren Bereich-Puffer oder einem festsitzenden Container — nicht von der Meta-Tags-Viewport-Einstellung selbst.

Zusammenfassung

Capacitor ist eine großartige Option für die Erstellung von nativen Anwendungen auf der Grundlage eines bestehenden Web-Projekts. Mit der Hinzufügung von Capgo ist es sogar einfacher, Live-Updates in Ihrer App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.

Erhalten Sie Informationen darüber, wie Capgo Ihnen helfen kann, bessere Apps schneller zu erstellen Registrieren Sie sich für ein kostenloses Konto heute.

Fortsetzen Sie mit der Erstellung von mobilen Apps mit Vue und Capacitor

Wenn Sie Erstellung von mobilen Apps mit Vue und Capacitor zur Planung nativer Medien- und Schnittstellenverhalten verwenden, verbinden Sie es mit Verwenden Sie @capgo/capacitor-live-Aktivitäten für die native Fähigkeit in @capgo/capacitor-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten, Mit @capgo/capacitor-video-player für die native Fähigkeit in Mit @capgo/capacitor-video-player, @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigation für die native Fähigkeit in Mit @capgo/capacitor-native-navigation.