Mit Vue und Capacitor mobile Apps erstellen

In diesem Tutorial führen wir Sie durch den Prozess der Umwandlung einer Vue-Web-Anwendung in eine native mobile App mithilfe von Capacitor. Optional können Sie Ihre mobile UI auch mit Konsta UI, einer Tailwind CSS-basierten mobile UI-Bibliothek, verbessern.

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

Um Ihre Vue-Anwendung für die native mobile Auslieferung 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 der Wurzel Ihres Projekts 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 Namen 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 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 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 sync

Native 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 für die Apple Developer Program für iOS und das 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 android

Stellen Sie Ihre App auf einem verbundenen Gerät mit Android Studio oder Xcode bereit.

Capacitor Live Reload

Aktivieren Sie das Live-Reload auf Ihrem Mobilgerät, indem Sie die Capacitor-App laden, 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 copy

Jetzt wird Ihre App automatisch neu geladen und zeigt Änderungen an, wenn Sie Ihre Vue-Anwendung aktualisieren.

Verwendung von 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 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 erneut:

npx cap sync

Hinzufügen von Konsta UI

Um Konsta UI in Ihrer Vue-Anwendung zu verwenden, müssen Sie bereits installiert haben und das Paket installieren: tailwind.config.js Um Konsta UI in Ihrer Vue-Anwendung zu verwenden, installieren Sie das Paket und passen Sie Ihre

npm i konsta

Verwenden Sie das Komponenten-Modul im Datei und verwenden Sie Konsta UI Vue Komponenten in Ihren Vue-Seiten. App Komponente in der Datei pages/_app.vue Komponente in der Datei, und verwenden Sie Konsta UI Vue Komponenten in Ihren Vue-Seiten.

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, Registrieren Sie sich für ein kostenloses Konto heute.

Fortsetzen Sie mit Building Mobile Apps with Vue und Capacitor

Wenn Sie native Medien- und Schnittstellenverhalten planen, verbinden Sie es mit Building Mobile Apps with Vue und Capacitor um native Medien- und Schnittstellenverhalten zu planen, verbinden Sie es mit Mit @capgo/capacitor-live-aktivitäten für die native Fähigkeit in Mit @capgo/capacitor-live-aktivitäten @capgo/capacitor-live-aktivitäten für die Implementierungsdetails 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 Implementierungsdetails in @capgo/capacitor-video-player und Mit @capgo/capacitor-native-navigation für die native Fähigkeit in Mit @capgo/capacitor-native-navigation

Mobile Apps mit Vue und Capacitor erstellen