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 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 Ordner in Ihrem Projekts-Root-Verzeichnis sehen. Dieser Ordner wird später von Capacitor verwendet.
Capacitor zu Ihrer Vue-Anwendung hinzufügen
Um Ihre Vue-Web-Anwendung in einen nativen mobilen Container umzuwandeln, folgen Sie diesen Schritten:
-
Installieren Sie das Capacitor CLI als Entwicklungszusammenhang und konfigurieren Sie es 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 webDir zur Ergebnis Ihres Build-Befehls:
{
"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 syncNative Apps erstellen und bereitstellen
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.
Benutzen Sie die Capacitor CLI , um beide native Projekte zu öffnen:
npx cap open ios
npx cap open androidStellen Sie Ihre App auf einem verbundenen Gerät bereit, indem Sie Android Studio oder Xcode verwenden.
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 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;Anwenden Sie diese Änderungen, indem Sie sie in Ihr natives Projekt übernehmen:
npx cap copyJetzt wird Ihre App automatisch neu geladen und zeigt Änderungen an, wenn Sie Ihre Vue-Anwendung aktualisieren.
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/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 auf Ihrem Gerät neu:
npx cap syncAls Nächstes können Sie die App auf iOS und Android mit Capgo-Navigation und Übergängen so anfühlen lassen, als wäre sie native, und beheben Sie häufige iOS-Anzeige-Probleme, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.
Natürlicher Anwendungsbenutzeroberfläche mit Capgo-Native Navigation und Übergängen
Ich habe in den letzten Jahren mit Ionic Kreuzplattformanwendungen entwickelt, aber die Integration mit Vue ist hackig und selten wertvoll, wenn Sie bereits eine Vue-Anwendung haben Tailwind CSS.
Für ein nativ anführendes Mobile-Fühl in einer Vue + Capacitor App, verwenden Sie Capgo-Plugins anstatt web-only UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — native Navbar, Liquid Glass Tab-Leiste auf iOS und eine getönte Tab-Leiste-Style auf Android. Ihre Vue-Router behält die Routen-Zustände; 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 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 Tab-Leiste (iOS verwendet die System-eigene Rendering; Android verwendet eine getönte 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>Umfasst die gerouteten Seiten in cap-router-outlet, cap-page, und cap-contentund rufen Sie an setDirection('forward') oder setDirection('back') bevor Sie navigieren. Duplikate Web-Ober- und -Unterbereiche, wenn native Navigation diese Ober- und 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 veröffentlicht auf npm). Es bietet safe-areas Hilfsfunktionen 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 Hilfsfunktionen wie pt-safe, pb-safe, und px-safe anstatt sie env(safe-area-inset-*) manuell zu verteilen. Das Projekt wird aktiv weiterentwickelt – wenn etwas für Ihre Vue-Einrichtung fehlt, Öffnen Sie ein Pull-Request auf GitHub.
iOS-Layoutprobleme beheben (Viewport, Safe Area und horizontale Überschreitung)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, fügen Sie mehr overflow-x: hidden oder passen Sie den Viewport-Tag an, um es normalerweise nicht zu beheben. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.
Stellen Sie sicher, dass der Viewport-Meta-Tag korrekt angewendet wird
Fügen Sie den Viewport-Meta-Tag hin index.html inside <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Das iOS-Sicherheitsbereich handhaben, indem nur ein Root-Wrapper verwendet wird
Erstellen Sie ein einzelnes 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 .app-shell. Doppelte Sicherheitsbereichsabstände in Kopfzeilen, Modalen und Layout-Wrappern machen die Benutzeroberfläche oft gekürzt oder zu groß aussehen.
Mit @capgo/tailwind-capacitor, können Sie denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf diesem einzelnen Shell.
Setzen Sie Capacitor iOS contentInset auf never erstes
In bevorzugt native Inset deaktivieren und lassen Sie CSS (oder Native Navigation’s capacitor.config.ts) das Safe Area besetzen. contentInsetMode: 'css'Mischen Sie __CAPGO_KEEP_0__’s automatische Inhalts-Einrastung mit CSS
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) Finden Sie das überlaufende Element
Der übliche Täter ist ein Element, das
, Tailwind 100vw, eine feste Pixelbreite oder eine große w-screenIn Safari Web Inspector, führen Sie aus: min-width.
Mit Tailwind ersetzen 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 w-screen Mit Native Navigation können Sie die native Inset-Einstellung deaktivieren und CSS (oder Native Navigation’s w-full wenn möglich. Viele horizontale Überschreitung von Ausgabeprobleme kommen von 100vw / w-screen, duplizierte sichere Bereichsabstand oder einem fester Breitencontainer — 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 Aktualisierungen in Ihre App hinzuzufügen, sodass Ihre Benutzer immer Zugriff auf die neuesten Funktionen und Fehlerbehebungen haben.
Lernen Sie, wie Capgo Ihnen helfen kann, bessere Apps schneller zu erstellen, sich für ein kostenloses Konto anmelden heute.
Weitermachen Sie von Building Mobile Apps with Vue und Capacitor
Wenn Sie Building Mobile Apps with Vue und Capacitor zur Planung von nativen Medien und Schnittstellenverhalten verwenden, verbinden Sie es mit Mit @capgo/capacitor-live-activities für die native Fähigkeit in @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetail in @capgo/capacitor-live-activities, 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.
