Eine vollständige Aufzeichnung des Prozesses zum Erstellen mobiler Anwendungen mit Vue Native

Vorwort

Vue Native ist ein JavaScript-Framework zum Erstellen plattformübergreifender mobiler Anwendungen mit JavaScript, die unter Android und iOS ausgeführt werden können. Durch die Einbindung von React Native können Entwickler Vue Native verwenden, um mobile Apps mit Vue.js zu erstellen.

Aus diesem Grund kann alles, was in React Native möglich ist, auch in Vue Native gemacht werden und der Code wird in React Native kompiliert. Auf diese Weise können Entwickler von den Vorteilen der Vue- und React Native-Ökosysteme profitieren.

In diesem Artikel besprechen wir die Funktionen von Vue Native und wie man mit Vue Native mobile Apps erstellt.

Funktionen von Vue Native

Vue Native bietet viele nützliche Funktionen, die Sie berücksichtigen sollten, wenn Sie sich für die Verwendung von Vue.js zum Erstellen mobiler Apps entscheiden.

Deklaratives Rendering

Vue Native verwendet ein deklaratives Programmierparadigma. Dies bedeutet, dass wir nur deklarieren müssen, wie unsere Komponenten und Zustände gerendert werden sollen, um die gewünschten Ergebnisse zu erzielen.

Zweiwegebindung

In unserer Vue Native-App können wir Daten zwischen unserer Komponentenklasse und ihrer Vorlage teilen. Wenn wir die Daten im Status ändern, wird dies automatisch in der Benutzeroberfläche angezeigt.

Wir müssen für die bidirektionale Datenbindung immer noch auf das V-Modell zugreifen. Das bedeutet, dass wir v-model verwenden können, um den Wert eines Eingabeelements an die Dateneigenschaft unserer Komponente zu binden.

Der Reichtum des Vue.js-Ökosystems

Das Vue-Ökosystem ist eines der größten und am schnellsten wachsenden Ökosysteme im JavaScript-Bereich. Das Erstellen von Anwendungen mit Vue Native bietet die Vorteile des größeren Vue-Ökosystems.

Das bedeutet, dass wir Funktionen wie v-if für bedingtes Rendering, v-model für bidirektionale Datenbindung, v-for für Listen-Rendering und Vuex für die Statusverwaltung verwenden können.

Kompilieren in React Native

Da Vue Native von React Native abhängt, ist der Einstieg für Entwickler, die mit dem React Native-Ökosystem vertraut sind, einfacher.

Wir können React Native-Komponenten auch in Vue Native rendern, ohne eine einzige zusätzliche Konfigurationszeile schreiben zu müssen, was eine einfache Integration und höhere Produktivität ermöglicht.

Einrichten Ihrer Entwicklungsumgebung

Der schnellste und einfachste Weg, mit Vue Native zu beginnen, besteht darin, eine mobile App mithilfe der Vue Native CLI zu bootstrappen. Diese CLI generiert eine einfache Einzelseitenanwendung mithilfe der Expo CLI oder der React Native CLI.

Dies bedeutet, dass wir die von unserer Anwendung benötigte CLI installieren müssen, um die Vue Native CLI zu verwenden.

Um zu beginnen, müssen wir einige Abhängigkeiten installieren. Führen Sie zunächst den folgenden Befehl aus, um Vue Native CLI global zu installieren.

$ npm install --g vue-native-cli

Installieren Sie als Nächstes die Expo CLI global, obwohl diese mit der React Native CLI austauschbar ist:

$ npm install --g expo-cli

Erstellen eines Vue Native-Projekts

Nachdem nun sowohl Vue Native als auch Expo CLI global installiert sind, erstellen wir mit dem folgenden Befehl ein Vue Native-Projekt:

vue-native init <IhrProjektname>

Starten Sie einen Entwicklungsserver, indem Sie zum Stammverzeichnis Ihres Projekts navigieren und diesen Befehl ausführen:

$ cd <IhrProjektname>
$ npm starten

Metro Bundler kompiliert JavaScript-Code in React Native und wird von http://localhost:19002/ ausgeführt. Wenn Sie in einem Webbrowser auf http://localhost:8080/ zugreifen, wird die folgende Seite angezeigt:

Um Ihre Vue Native-App auf einem physischen Gerät anzuzeigen, scannen Sie den QR-Code in Ihrem Browser und öffnen Sie den Link in Expo Go auf Android oder iOS.

Wir können die App auch auf einem Android-Emulator oder iOS-Simulator öffnen, indem wir auf den im Browser angezeigten Link klicken, aber nicht alle in Expo Go verfügbaren APIs sind auf dem Simulator verfügbar.

Alternativ können wir die vom Vue Native-Kernteam vorbereitete Kitchen Sink-Demoanwendung klonen.

Native Vue-UI-Komponenten

Vue Native bietet einige sofort einsatzbereite UI-Komponenten zum Erstellen von Anwendungsschnittstellen. Schauen wir uns einige der wichtigsten an.

Komponenten anzeigen

Die Ansichtskomponente funktioniert genau wie das Div-Tag in unserem normalen HTML. Diese Komponente ist der grundlegende Baustein zum Erstellen von Benutzeroberflächen in Vue Native, genau wie in React Native.

Wir können mehrere Unterkomponenten in einer Ansichtskomponente haben, wie beispielsweise den folgenden Code.

<Vorlage>
  <Klasse anzeigen="Container">
    <text>Meine tolle native Vue-App</text>
  </Ansicht>
</Vorlage>

Textkomponente

Um Text in unserer mobilen App auszugeben, können wir keine normalen HTML-Tags wie h1 oder p verwenden. Stattdessen müssen wir die Komponente <text>...<text> verwenden. Die Verwendung dieser Komponente ist sehr unkompliziert.

<Vorlage>
  <text>Hallo Welt</text>
</Vorlage>

Bildkomponente

Die Bildkomponente rendert statische Bilder, Netzwerkbilder und Bilder vom Gerät des Benutzers.

Anders als das im normalen img-Tag verwendete src-Attribut binden wir hier das Quellattribut in die Bildkomponente ein, um unsere Bilder dynamisch zu laden. Dadurch kann Webpack unsere Bildressourcen während des Build-Prozesses bündeln.

Wir können ein Bild in unsere Vue Native-App laden, indem wir Folgendes hinzufügen:

<Vorlage>
    <!-- Netzwerkbild -->
  <Bild
     :style="{ Breite: 300, Höhe: 150 }"
     :Quelle="{
         URI: 'https://images.unsplash.com/photo-1621570074981-ee6a0145c8b5?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80',
      }"
   />

  <!-- Statisches Bild -->
  <Bild
     :style="{ Breite: 300, Höhe: 150 }"
     :Quelle="erfordern('./assets/photo.jpg')"
  />

  <!-- Lokales Disk-Image --> 
  <Bild
     :style="{Breite: 66, Höhe: 58}"
     :Quelle="{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}"
   />
</Vorlage>

TextInput-Komponente

Die TextInput-Komponente gibt Text über die Tastatur des Benutzers in eine Anwendung ein. Wir können v-model verwenden, um die Daten in unserem Status an die TextInput-Komponente zu binden. Dadurch können wir den Wert eines TextInputs nahtlos abrufen und festlegen:

<Vorlage>
  <Klasse anzeigen="Container"> 
    <text-eingabe
      :Stil="{
        Höhe: 30,
        Breite: 250,
        Rahmenfarbe: '#511281',
        Rahmenbreite: 1,
      }"
      v-Modell="Text"
    />
  </Ansicht>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      text: "",
    };
  },
};
</Skript>

Der obige Code gibt dann den folgenden Bildschirm in der Vue Native-App aus:

NativeBase-UI-Komponenten

Um eine produktionsreife mobile App zu erstellen, reicht die Verwendung nur der integrierten Vue Native-Komponenten möglicherweise nicht aus. Glücklicherweise bietet Vue Native die Vorteile sowohl der React Native- als auch der Vue.js-Ökosysteme, sodass wir NativeBase-UI-Komponenten verwenden können.

NativeBase wurde von GeekyAnts erstellt, demselben Team, das hinter Vue Native steht. Diese UI-Komponente verlieh unseren mobilen Apps ein wirklich natives Erscheinungsbild und ermöglichte plattformspezifische Designs sowohl für Android als auch für iOS über dieselbe JavaScript-Codebasis.

Zweiseitige Datenbindung

Mit v-model ist das Teilen von Daten zwischen unserer Vue-Komponentenvorlage und dem Vue-Status in Vue Native ein Kinderspiel. Wir können die bidirektionale Datenbindung mithilfe der v-model-Direktive wie folgt untersuchen:

<Vorlage>
  <Klasse anzeigen="Container"> 
    <text-eingabe
      :Stil="{
        Höhe: 30,
        Breite: 250,
        Rahmenfarbe: '#511281',
        Rahmenbreite: 1,
      }"
      v-Modell="Text"
    />
  </Ansicht>
</Vorlage>

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      text: "",
    };
  },
};
</Skript>

Durch die Ausgabe eines Eingabefelds mit Datenbindung von unserem Status an das Eingabefeld und einer Textkomponente können wir Folgendes sehen:

Navigation und Routing

Navigation und Routing in Vue Native-Anwendungen werden von der Vue Native Router-Bibliothek übernommen. Unter der Haube verwendet diese Bibliothek das beliebte React Navigation-Paket. Sowohl Vue Native Router als auch React Navigation haben ähnliche APIs, daher ist auch die Installation ähnlich.

Die Bibliothek ist nicht vorinstalliert. Um die Navigation in unserer Anwendung verwenden zu können, müssen wir sie folgendermaßen installieren.

npm im vue-native-router

Bitte beachten Sie, dass wir die folgenden Pakete installieren müssen, damit Vue Native Router ordnungsgemäß funktioniert:

• React-Native-Wiederbelebungsgerät
• reagiere nativer Gesten-Handler
• Reagieren-Native-Papier

Führen Sie den folgenden Befehl im Stammverzeichnis des Projekts aus, um diese Pakete zu installieren:

npm ich react-native-reanimiert react-native-gesture-handler react-native-paper

Vue Native Router bietet StackNavigator und DrawerNavigator, um Bildschirme für die Navigation zu registrieren:

<Skript>
importieren {
  erstelleAppContainer,
  erstelleStackNavigator,
} von „vue-native-router“;

importiere SettingsScreen aus "./screens/SettingsScreen.vue";
HomeScreen aus "./screens/HomeScreen.vue" importieren;

const StackNavigator = erstelleStackNavigator(
  {
    Einstellungen: SettingsScreen,
    Home: HomeScreen,
  },
  {
    initialRouteName: 'Heimat',
  }
);

const AppNavigator = createAppContainer(StackNavigator);

Standard exportieren {
  Komponenten: { AppNavigator },
}
</Skript>

Um zwischen Bildschirmen zu navigieren, rufen Sie die Navigationsmethode des Navigationsobjekts auf, das als Eigenschaften wie folgt übergeben wird:

<Skript>
Standard exportieren {
  // Navigation wird als Prop deklariert
  Requisiten: {
    Navigation:
      Typ: Objekt
    }
  },
  Methoden: {
    navigiereZumBildschirm() {
      this.navigation.navigate("Profil");
    }
  }
}
</Skript>

Zustandsverwaltung

Für den zentralisierten Statusverwaltungsmodus in Vue Native-Anwendungen können wir Vues offizielle Statusverwaltungsbibliothek Vuex verwenden.

Die Integration von Vuex ist sehr einfach. Installieren Sie zunächst Vuex mit einem der folgenden Befehle:

npm und vuex
//oder
Garn hinzufügen Vuex

Erstellen Sie eine zentrale Speicherdatei und fügen Sie nach Bedarf Ihrer Anwendung Status, Getter, Mutationen oder Aktionen hinzu. Der Einfachheit halber wird hier das Statusobjekt verwendet:

// speichern/index.js

importiere Vue von „vue-native-core“;
importiere Vuex von „vuex“;
Vue.use(Vuex);
const store = neuer Vuex.Store({
  Zustand: {
    Name: 'Ejiro Asiuwhu',
  },
});
Standardspeicher exportieren;

Die Verwendung von Daten und Methoden in unserem Store unterscheidet sich stark von einer herkömmlichen Vue-Anwendung. So importieren und verwenden wir die Daten in unserem Store:

<Skript>
Store aus "./store" importieren;
Standard exportieren {
  berechnet: {
    Name() {
      gibt Store.State.Name zurück;
    },
  },
};
</Skript>

Beachten Sie, dass wir this.$store nicht wie normalerweise in einem Vue- und Vuex-Anwendungs-Setup verwenden.

Auf Geräte-APIs zugreifen

Dank des umfangreichen Ökosystems von React Native ist es möglich, in unserer Vue Native-App auf native Geräte-APIs zuzugreifen. Um beispielsweise in unserer App auf die Geolokalisierungs-API des Geräts des Benutzers zuzugreifen, können wir expo-location wie folgt verwenden.

<Vorlage>
  <Klasse anzeigen="Container">
 <Schaltfläche
      :on-press="Standort abrufen"
      Titel="Standort abrufen"
      Farbe: #184d47"
      accessibility-label="Zugriff auf den Standort des Benutzers erhalten"
    >
    <text>Standortdetails:</text>
    <text>{{ Standort }}</text>
    <text>Breitengrad: {{ latitude }}</text>
    <text>Längengrad: {{ longitude }}</text>
    <text class="text-error">{{ Fehlermeldung }}</text>
  </Ansicht>
</Vorlage>

<Skript>
importiere * als Standort von „Expo-Location“;

Standard exportieren {
  Daten() {
    zurückkehren {
      Standort: "",
      Breitengrad: "",
      Längengrad: "",
      Fehlermeldung: "",
      text: "",
      Benutzer: {
        Land: "",
      },
    };
  },
  Methoden: {
    asynchron getLocation() {
      versuchen {
        let { status } = warte auf Location.requestForegroundPermissionsAsync();
        if (status !== "gewährt") {
          this.errorMessage = "Die Berechtigung zum Zugriff auf den Standort wurde verweigert";
          zurückkehren;
        }
        let location = warte auf Location.getCurrentPositionAsync({});
        dieser.Standort = Standort;
        diese.Breitengrad = Standort.Koordinaten.Breitengrad;
        diese.Länge = Standort.Koordinaten.Länge;
        diese.Fehlernachricht = "";
      } Fehler abfangen {
        this.errorMessage = Fehler;
      }
    },
  },
}
</Skript>

Durch die Verwendung des Expo-Pakets ist keine zusätzliche Konfiguration oder Einrichtung erforderlich, was die Erstellung mobiler Apps mit Vue Native zum Kinderspiel macht.

Zusammenfassen

Das Erstellen mobiler Apps mit Vue Native eröffnet viele Möglichkeiten zum Erstellen plattformübergreifender mobiler Apps mit JavaScript.

Durch Zugriff auf die Vielfalt und Leistungsfähigkeit der Vue- und React Native-Ökosysteme können Entwickler .vue-Komponenten schreiben und diese mit Expo- und React Native-Paketen bündeln.

Lässt sich mit wenig bis gar keiner zusätzlichen Konfiguration in Ihre Anwendung integrieren.

Der vollständige Code, der in diesem Tutorial verwendet wird, ist auf GitHub verfügbar.

Quellcode dieses Tutorials: github.com/ejirocodes/…

Übersetzt von blog.logrocket.com, Autor: Ejiro Asiuwhu

Dies ist das Ende dieses Artikels über die Verwendung von Vue Native zum Erstellen mobiler Anwendungen. Weitere relevante Inhalte zum Erstellen mobiler Anwendungen mit Vue Native finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!