In diesem Tutorial werden wir Sie durch den Prozess der Umwandlung einer Vue-Web-Anwendung in eine native mobile App mit Capacitor führen. Sie können auch Capgo Native Navigation und Transitions hinzufügen, um eine native mobile Atmosphäre zu erhalten, und tailwind-capacitor für sichere Bereiche verwenden.
Über Capacitor
Capacitor ist ein revolutionärer Werkzeug, das 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 installUm 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 Fach in Ihrem Projektverzeichnis sehen. Dieses Fach wird später von Capacitor verwendet.
Capacitor in Ihre Vue-Anwendung hinzufügen
Um Ihre Vue-Web-Anwendung in einen nativen mobilen Container umzuwandeln, folgen Sie diesen Schritten:
-
Installieren Sie den Capacitor CLI als Entwicklungszusammenhang und konfigurieren Sie ihn innerhalb Ihres Projekts. Akzeptieren Sie die Standardwerte für Name und Bundle-ID während der Konfiguration.
-
Installieren Sie das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.
-
Fügen Sie die Plattformen hinzu, und Capacitor wird Ordner für jede Plattform an der Wurzel 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 androidSie sollten nun neue iOS und android Ordner in Ihrem Vue-Projekt sehen.
Aktualisieren Sie das capacitor.config.json Datei, um die Ordner für das Web Zur Ergebnis des Befehls zum Erstellen:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Jetzt kannst du dein Vue-Projekt erstellen und es mit Capacitor synchronisieren:
npm run build
npx cap syncErstellen und Bereitstellen von nativen Apps
Um iOS-Apps zu entwickeln, benötigst du Xcode installiert, und für Android-Apps benötigst du Android Studio installiert. Darüber hinaus musst du dich bei Apple Developer Program für iOS und Google Play Console für Android anmelden, um deine App im App Store zu verteilen.
Verwende die Capacitor CLI zum Öffnen beider nativen Projekte:
npx cap open ios
npx cap open androidVeröffentliche deine App auf einem verbundenen Gerät mithilfe von Android Studio oder Xcode.
Capacitor Live Reload
Aktiviere das Live-Reload auf deinem Mobilgerät, indem du die Capacitor-App die Inhalte von einer bestimmten URL auf deinem Netzwerk lädt.
Finde deine lokale IP-Adresse und aktualisiere das capacitor.config.ts Datei 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;Anwende diese Änderungen, indem du sie in dein natives Projekt kopierst:
npx cap copyNow, your app will automatically reload and show changes when you update your Vue app.
Mit Capacitor-Plugins
Installen Sie ein Capacitor-Plugin, wie z.B. das Share-Plugin, und verwenden Sie es in Ihrer Vue-Anwendung:
npm i @capacitor/shareImportieren Sie das Paket und rufen Sie die share() Funktion in Ihrer App 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 Ihr Gerät:
npx cap syncAls 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 lösen Sie häufige iOS-Anzeige-Probleme, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.
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 ein nativ anführendes Mobile-Gefühl in einer Vue + Capacitor-App verwenden Sie Capgo-Plugins anstatt web-only UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — nativere Leiste, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Style auf Android. Ihr Vue-Router hält die Routenstatus; der Plugin besitzt die native Chrome.
- @capgo/capacitor-transitions — Ionic-Style-Seitenübergänge und iOS-Rück-Edge-Swipe in der WebView-Schicht, ohne Ionic-UI zu übernehmen.
Installieren Sie beide:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurieren Sie die native Navigation mit CSS-Inset-Modus, damit das Web-Inhalt die native Leisten respektiert:
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>Umranden Sie die gerouteten Seiten mit cap-router-outlet, cap-pageund 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 Utilities und andere Capacitor-freundliche Tailwind-Plugins:
bun add -D tailwind-capacitorIn src/assets/main.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Verwenden Sie Utilities 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 ein 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 allein normalerweise nicht aus. Arbeiten Sie durch diese Kontrollen in der Reihenfolge. overflow-x: hidden Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird
Fügen Sie den Viewport-Meta-Tag in
Add the viewport meta tag in index.html innerhalb <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />iOS-Sicherheitsbereich von einem einzigen Root-Wrapper behandeln
Erstellen Sie eine einzelne App-Shell und fügen Sie dort den Sicherheitsbereich ein — 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 Seiteninhalte innerhalb einhüllen .app-shell. Doppelte Sicherheitsbereichspaddings in Kopfzeilen, Modalen und Layout-Wrappern machen die Benutzeroberfläche oft gekürzt oder zu groß aussehen.
Mit @capgo/tailwind-capacitorkönnen Sie denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzigen Schale ausdrücken.
Capacitor iOS contentInset auf never context: Seite/Bereich: Produktseite für Live-Updates. Rolle: Kurzer Benutzeroberflächentext oder Navigationspunkt. Nachrichtenschlüssel `live_update_dynamic_label_to` (Live-Update-Dynamischer-Label-Zu).
In capacitor.config.ts, bevorzugt native inset deaktivieren und lassen Sie 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 Inhaltsabstand mit CSS env(safe-area-inset-*) padding ist eine häufige Ursache für doppelten Abstand.
Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das 100vw, Tailwind w-screen, eine feste Pixelbreite oder eine große min-width.
In Safari Web Inspector, ausführen Sie:
[...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 Überschreitung von Problemen kommen von 100vw / w-screenverdoppelter sicheren Bereich Padding, oder einem festsitzenden Container — nicht von der Viewport Meta-Tag 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 Ihre 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 von nativen Medien und Interfaceverhalten 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.
