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 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-App vorbereiten
Erstens 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 Auslieferung vorzubereiten, müssen Sie Ihr Projekt exportieren. Fügen Sie einen Skriptblock 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 folder in your project’s root directory. This folder will be used by Capacitor later.
Adding Capacitor to Your Vue App
__CAPGO_KEEP_0__ in Ihrer Vue-Anwendung hinzufügen
-
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
-
Capacitor-Paket als Entwicklungszusammenhang und konfigurieren Sie es innerhalb Ihres Projekts. Akzeptieren Sie die Standardwerte für Name und Bundle-ID während der Einrichtung. Installieren Sie das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen. Fügen Sie die Plattformen hinzu, und wird Ordner für jede Plattform im Root-Verzeichnis 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 Ordner für iOS und Android in Ihrem Vue-Projekt sehen. iOS und Android Ordner in Ihrem Vue-Projekt.
Aktualisieren Sie das capacitor.config.json -Datei, um den webDir auf das Ergebnis Ihres Build-Befehls zu setzen:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "dist"
}Jetzt können Sie Ihr Vue-Projekt bauen und es mit Capacitor synchronisieren:
npm run build
npx cap syncErstellen und bereitstellen Sie native Apps
Um iOS-Apps zu entwickeln, benötigen Sie Xcode installiert und für Android-Apps Android Studio installiert. Darüber hinaus müssen Sie sich im Apple Developer Program 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 zum Öffnen beider native Projekte:
npx cap open ios
npx cap open androidDeployen 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 die Capacitor-App 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 native 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:
<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:
npx cap syncAls Nächstes können Sie die App auf iOS und Android mit Capgo-Navigations- und Übergangseffekten und der Behebung von gängigen iOS-Ansichten, die zu horizontaler Überfluss oder gekürzten sicheren Bereichen führen, noch nativer anfühlen.
Natürlicher Anwendungsdesign mit Capgo-Native-Navigation und -Übergängen
Ich habe in den letzten Jahren mit Ionic die Entwicklung von cross-plattformen Anwendungen betrieben, aber die Integration mit Vue ist hackig und selten wertvoll, wenn Sie bereits Tailwind CSS.
besitzen. Für einen nativen mobilen Look in einer Vue + Capacitor-Anwendung verwenden Sie stattdessen Capgo-Plugins anstelle von web-basierten UI-Kits wie Konsta UI:
- @capgo/capacitor-native-navigation — nativer Navbar, Liquid Glass Tabbar auf iOS und eine verschwommene Tabbar-Style auf Android. Ihre Vue-Router behält die Routen-Status; der Plugin besitzt die native Chrome.
- @capgo/capacitor-Übergänge — Seitenübergänge im Ionic-Stil und iOS-Rückwärts-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 Webinhalte die native Balken respektiert:
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Rendern Sie eine Glass-Liquid-Tasteleiste (iOS verwendet die Systemeigene 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>Umgehen Sie die gerouteten Seiten mit 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 die native Navigation diese Oberflächen besitzt.
Siehe die vollständigen Anleitungen: Mit @capgo/capacitor-native-Navigation und Mit @capgo/capacitor-Übergänge.
Sichere Bereiche mit Tailwind
Für sichere Bereiche auf Geräten in Tailwind CSS verwenden Sie @capgo/tailwind-capacitor (veröffentlicht als tailwind-capacitor auf npm). Es bietet safe-areas Nutzfunktionen 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 Nutzbarkeiten wie pt-safe, pb-safe, und px-safe anstatt, sie aufzutragen env(safe-area-inset-*) aktiv entwickelt wird — wenn etwas für Ihre Vue-Einrichtung fehlt, Öffnen Sie einen PR auf GitHub.
iOS-Bereichslayoutprobleme (Viewport, Safe Area und horizontale Überschuss)
Wenn Inhalte auf iOS gekürzt, verschoben oder horizontal scrollbar aussehen, overflow-x: hidden oder die Anpassung des Viewport-Tags allein hilft normalerweise nicht. Arbeiten Sie durch diese Kontrollen in der Reihenfolge.
Stellen Sie sicher, dass die Viewport-Metatag korrekt angewendet wird
Fügen Sie den Viewport-Metatag in index.html innerhalb <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Behandeln Sie den iOS-Safe-Area von einem einzigen Root-Wrapper
Erstellen Sie ein einzelnes App-Shell und wenden Sie dort Safe-Area-Padding 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);
}Wrap all page content inside .app-shell. Duplicated safe-area padding in headers, modals, und Layout-Wrapper macht die Benutzeroberfläche oft gekürzt oder zu groß aussehen.
Mit @capgo/tailwind-capacitor, kannst du denselben Abstand mit Hilfsfunktionen wie pt-safe pb-safe px-safe auf dieser einzelnen Shell.
Setze Capacitor iOS contentInset auf never erst
In capacitor.config.ts, bevorzugt native Inset disabled und lasse CSS (oder Native Navigation’s contentInsetMode: 'css') den sicheren Bereich besitzen:
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist',
ios: {
contentInset: 'never',
},
};Mische Capacitor’s automatische Inhaltsinset mit CSS env(safe-area-inset-*) Die Padding ist eine häufige Ursache für doppelte Zeilenabstände.
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 Überlaufprobleme kommen von 100vw / w-screen, dupliziertem sicherem Bereich-Padding oder einem festschrittigen 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.
Lernen Sie, wie Capgo Ihnen helfen kann, bessere Apps schneller zu bauen, sich für ein kostenloses Konto anmelden heute.
Fortsetzen Sie mit Building Mobile Apps mit Vue und Capacitor
Wenn Sie Building Mobile Apps mit Vue und __CAPGO_KEEP_0__ verwenden, um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Verwenden Sie @Capacitor/__CAPGO_KEEP_1__-live-aktivitäten für die native Fähigkeit in Verwenden Sie @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-aktivitäten, @capgo/capacitor-live-aktivitäten für die Implementierungsdetail in @capgo/capacitor-live-aktivitäten, Verwenden Sie @capgo/capacitor-video-player Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities für die native Fähigkeit in Using @capgo/capacitor-video-player @capgo/capacitor-video-player für die Implementierungsdetails in @capgo/capacitor-video-player, und Using @capgo/capacitor-native-navigation für die native Fähigkeit in Using @capgo/capacitor-native-navigation.
