So installieren Sie Ionic auf Fedora 38/37/36

Ionic ist ein beliebtes Open-Source-Framework für den Aufbau von mobilen Anwendungen mit plattformübergreifend. Es nutzt Winkel, Reagieren oder Vue.JS, um hochwertige, native Benutzeroberflächen zu erstellen. Fedora ist eine Community-gesteuerte Linux-Verteilung, die als Grundlage für den kommerziellen Red Hat Enterprise Linux (RHEL) dient. In diesem Artikel führen wir Sie durch den Prozess der Installation von Ionic on Fedora sowie die Erstellung einer einfachen Beispielanwendung.

Voraussetzungen

Bevor Sie Ionic auf Fedora installieren können, stellen Sie sicher, dass Sie die folgenden Voraussetzungen haben:

• Ein System, das Fedora ausführt (Version 33 oder höher wird empfohlen).
• Ein Benutzerkonto mit sudo -Berechtigungen.

Schritt 1: Aktualisieren Sie das System

Aktualisieren Sie zunächst Ihr Fedora -System, indem Sie den folgenden Befehl ausführen:

sudo dnf update -y -y  

Dieser Befehl stellt sicher, dass Ihr System über die neuesten Updates und Sicherheitspatches verfügt.

Schritt 2: Knoten installieren.JS

Ionic benötigt einen Knoten.JS, eine JavaScript -Laufzeit, um zu laufen. Knoten installieren.JS Verwenden Sie den folgenden Befehl:

curl -l https: // rpm.nodesource.com/setup_18.x | sudo -e Bash -  sudo dnf installieren nodejs  

Nach Abschluss der Installation können Sie den Knoten überprüfen.JS -Version durch Laufen:

Knoten -v  

Schritt 3: Ionencli installieren

Ionic CLI (Befehlszeilenschnittstelle) ist ein Tool, mit dem Sie ionische Anwendungen erstellen, entwickeln und verwalten können. Installieren Sie die Ionic CLI weltweit auf Ihrem System mit NPM:

sudo npm install -g @ionic/cli  

Sobald die Installation abgeschlossen ist, überprüfen Sie die ionische CLI -Version, indem Sie ausführen:

Ionic -v  

Schritt 4: Erstellen Sie ein neues ionisches Projekt

Nachdem Sie Ionic installiert haben, können Sie ein neues ionisches Projekt erstellen. Führen Sie dazu den folgenden Befehl aus:

Ionischer Start mySampleApp blank --typ = eckig  

Ersetzen "MySampleApp" mit dem gewünschten Namen für Ihre Bewerbung. Dieser Befehl erstellt ein neues Verzeichnis mit dem angegebenen Namen und setzt ein ionisches Projekt mit einer leeren Vorlage mit Angular ein.

Schritt 5: Navigieren Sie zum Projektverzeichnis

Navigieren Sie zum neu erstellten Projektverzeichnis:

CD MySampleApp  

Schritt 6: Führen Sie die ionische Anwendung aus

Verwenden Sie den folgenden Befehl, um die ionische Anwendung in Ihrem Webbrowser auszuführen:

Ionischer Aufschlag  

Dieser Befehl öffnet Ihren Standard -Webbrowser und zeigt Ihre ionische Anwendung an.

Schritt 7: Erstellen Sie eine Beispielanwendung

Öffnen Sie das Erstellen einer einfachen Beispielanwendung die “SRC/App/Home/Home.Buchseite.HTML ” Datei in Ihrem bevorzugten Texteditor und ersetzen Sie den Inhalt durch Folgendes:

Meine Beispiel -App meine Beispiel -App klickt auf mich!

12345678910111213141516171819

Meine Beispiel -App Meine Beispiel -App Klick mich!

Als nächstes öffnen Sie die “SRC/App/Home/Home.Buchseite.ts ” Datei in Ihrem Texteditor und ersetzen Sie den Inhalt durch Folgendes:

component aus '@angular/core' importieren; import alertController aus '@ionic/Angular'; @Component (Selector: 'App-Home', Templateurl: 'Home.Buchseite.HTML ', Styleurls: [' Zuhause.Buchseite.SCSS '],) Exportklasse -Homepage Constructor (public alertController: alertController) async showAlert () const alert = warte darauf,.AlertController.erstellen (Header: 'Hallo!', Nachricht:' Dies ist eine ionische Beispielanwendung.', Schaltflächen: [' ok ']); Warten Sie aufmerksam.gegenwärtig();

12345678910111213141516171819202122

import component aus '@angular/core'; import alertController aus '@ionic/Angular'; @Component (Selector: 'App-Home', Templateurl: 'Home.Buchseite.HTML ', Styleurls: [' Zuhause.Buchseite.SCSS '],) Exportklasse -Homepage Constructor (public alertController: alertController) async showAlert () const alert = warte darauf,.AlertController.erstellen (Header: 'Hallo!', Nachricht:' Dies ist eine ionische Beispielanwendung.', Schaltflächen: [' ok ']); Warten Sie aufmerksam.gegenwärtig();

In dieser Beispielanwendung haben wir eine ionische Schaltfläche hinzugefügt, die beim Klicken eine einfache Warnung mit einer Nachricht anzeigt.

Schritt 8: Testen Sie die Beispielanwendung

Nachdem Sie die Beispielanwendung erstellt haben, führen Sie sie erneut in Ihrem Webbrowser aus, indem Sie den folgenden Befehl aus dem Projektverzeichnis ausführen:

Ionischer Aufschlag  

Ihr Webbrowser sollte die aktualisierte ionische Anwendung öffnen und anzeigen. Drücke den "Klick mich!” Taste, um die Warnung mit der Nachricht zu sehen.

Abschluss

In diesem Artikel haben wir gezeigt, wie Ionic auf Fedora installiert und eine einfache Beispielanwendung erstellt wird. Sie sind jetzt bereit, mit dem ionischen Framework plattformübergreifende mobile Anwendungen zu entwickeln. Mit dieser Fundament können Sie hochwertige, native Benutzeroberflächen für Ihre mobilen Anwendungen auf Fedora erstellen.