Mit Vue und Capacitor mobile Apps erstellen

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

Ü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 einen JavaScript-Bridge.

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 install

Um 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 Ihre 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 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 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 android

Sie 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 sync

Bauen und Bereitstellen von Native-Apps

To entwickeln Sie iOS-Apps, benötigen Sie Xcode installiert und für Android-Apps Android Studio. Darüber hinaus müssen Sie sich für iOS im Apple Developer Programm und für Android im Google Play Console 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

Deployen 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 den Inhalt 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-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/share

Importieren 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 sync

Hinzufügen von Konsta UI

Um Konsta UI in Ihrer Vue-App zu verwenden, benötigen Sie tailwind bereits installiert und installieren Sie das Paket: tailwind.config.js Um Konsta UI in Ihrer Vue-App zu verwenden, installieren Sie das Paket und ändern Sie Ihre

npm i konsta

Datei: App Um Ihre App mit Konsta UI zu umhüllen, verwenden Sie das pages/_app.vue Komponent in der

Datei, und verwenden Sie Konsta UI Vue-Komponenten in Ihren Vue-Seiten.

Capacitor is a great option for building native applications based on an existing web project. With the addition of Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.

Learn how Capgo can help you build better apps faster, Lernen Sie, wie __CAPGO_KEEP_0__ Ihnen helfen kann, bessere Apps schneller zu erstellen, Registrieren Sie sich für ein kostenloses Konto