In diesem Tutorial werden wir Sie durch den Prozess führen, wie Sie eine Vue-Web-Anwendung in eine native mobile App umwandeln können, indem Sie Capacitor verwenden. 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.
Ihre Vue-Anwendung vorbereiten
Zuerst erstellen Sie ein neues Vue-Projekt, 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"
}
}Nach dem Ausführen des Befehls sollten Sie ein neues Verzeichnis im Root-Verzeichnis Ihres Projekts sehen. Dieses Verzeichnis wird später von __CAPGO_KEEP_0__ verwendet. build Ein neues Verzeichnis in Ihrem Projekts Root-Verzeichnis. dist folder in your project’s root directory. This folder will be used by Capacitor later.
Adding Capacitor to Your Vue App
Um Ihre Vue-Web-App in einen nativen mobilen Container umzuwandeln, folgen Sie diesen Schritten:
-
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.
-
Installieren Sie das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.
-
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 androidSie sollten nun neue Verzeichnisse sehen. iOS und android Ordner in Ihrem Vue-Projekt.
Aktualisieren Sie das capacitor.config.json Datei, um den webDir auf den Ausgangspunkt Ihres Build-Befehls zu setzen:
{
"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 syncNatives 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.
Verwenden Sie die Capacitor CLI zum Öffnen beider nativen Projekte:
npx cap open ios
npx cap open androidVeröffentlichen 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 laden lässt.
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-App aktualisieren.
Mit Capacitor-Plugins
Installieren Sie ein Capacitor-Plugin, wie z.B. das Share-Plugin, und verwenden Sie es in Ihrer Vue-App:
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 das sync Kommando aus und deployen Sie die App erneut auf Ihr Gerät:
npx cap syncAls Nächstes können Sie die App auf iOS und Android mit Capgo-Navigation und Übergängen noch nativer gestalten und gängige iOS-Anzeigeeinheiten beheben, die zu horizontaler Überschreitung oder gekürzten sicheren Bereichen führen.
Natürliche Benutzeroberfläche mit Capgo nativer 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 umständlich und selten lohnenswert, wenn Sie bereits Tailwind CSS.
besitzen. Für eine natürliche mobile Benutzeroberfläche in einer Vue + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstatt web-basierten UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — nativer Navbar, Liquid Glass-Tastenleiste auf iOS und eine verschwommene Tastenleiste-Style auf Android. Der Vue-Router behält die Routenstatus; das Plugin besitzt die native Chrome.
- @capgo/capacitor-transitions — Ionic-Style-Seiteneinblendungen und iOS-Rückwärts-Schub auf der WebView-Schicht, ohne Ionic-Benutzeroberfläche zu übernehmen.
Installieren Sie beide:
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncKonfigurieren Sie die nativen Navigationen mit CSS-Inset-Modus, damit das Webinhalte die nativen Balken respektieren:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Renderen Sie eine Liquid Glass-Tasteleiste (iOS verwendet die System-Rendering; Android verwendet einen verschwommenen 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>Verwenden Sie für geroutete Seiten cap-router-outlet, cap-page, und cap-content, und rufen Sie setDirection('forward') oder setDirection('back') vor der Navigation auf. Duplizieren Sie Web-Über- oder Fußzeilen nicht, wenn native Navigation diese Oberflächen besitzt.
Siehe die vollständigen Anleitungen: Verwenden Sie @capgo/capacitor-native-navigation und Verwenden Sie @capgo/capacitor-transitions.
Sichere Bereiche mit Tailwind
Für sichere Bereiche von Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (als veröffentlicht auf tailwind-capacitor auf npm). Es bietet safe-areas Nützlichkeiten 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 Nützlichkeiten 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-Konfiguration fehlt, Öffnen Sie ein PR auf GitHub.
iOS-Layoutprobleme beheben (Viewport, sichere Bereiche und horizontale Überschuss)
Wenn Inhalte gekürzt, verschoben oder horizontal scrollbar auf iOS aussehen, hilft das Hinzufügen oder Anpassen der Viewport-Tags normalerweise nicht. 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
innerhalb index.html Behandeln Sie die iOS-Sicherheitsbereiche von einem einzigen Root-Wrapper aus <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Erstellen Sie ein einzelnes App-Shell und fügen Sie dort die Sicherheitsbereich-Padding an — nicht in mehreren verschachtelten Komponenten:
Umwickeln Sie alle Seiteninhalte innerhalb
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);
}Wiederholte Sicherheitsbereich-Padding in Kopfzeilen, Modalen und Layout-Wrappern macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen. .app-shellMit
@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitorexpressieren pt-safe pb-safe px-safe auf dieser einzelnen Shell.
Setzen Sie Capacitor iOS contentInset auf never erst
In capacitor.config.ts, bevorzugen Sie native inset deaktiviert und lassen Sie CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besetzen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist',
ios: {
contentInset: 'never',
},
};Die Mischung aus Capacitor’s automatischem Inhaltseinschub mit CSS env(safe-area-inset-*) Padding ist eine häufige Ursache für doppeltes 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:
[...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-screen, dupliziertem sicheren Bereichsabstand oder einer festerbreiten Container — nicht von der Viewport-Meta-Tags selbst.
Zusammenfassung
Capacitor ist eine großartige Option für die Erstellung von nativen Anwendungen auf der Basis 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, sich für ein kostenloses Konto anmelden heute.
Weitermachen Sie von Building Mobile Apps mit Vue und Capacitor
Wenn Sie verwenden Mit Vue und Capacitor Mobile Apps entwickeln um native Medien und Schnittstellenverhalten zu planen und zu verbinden, für die native Fähigkeit in @capgo/capacitor-live-activities für die Implementierungsdetail in @capgo/capacitor-live-activities @capgo/capacitor-live-activities für die native Fähigkeit in @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player @capgo/capacitor-video-player für die Implementierungsdetail in @capgo/capacitor-video-player und für die native Fähigkeit in @capgo/capacitor-native-navigation für die Implementierungsdetail in @capgo/capacitor-native-navigation für die native Fähigkeit in @capgo/capacitor-native-navigation.
