Ein Vue.js-Tutorial für Anfänger: Lernen Sie die Grundlagen und verwenden Sie diese Starter-Vue-Struktur

Ein Vue.js-Tutorial für Anfänger: Lernen Sie die Grundlagen und verwenden Sie diese Starter-Vue-Struktur

Ein Vue.js-Tutorial für Anfänger: Lernen Sie die Grundlagen und verwenden Sie diese Starter-Vue-Struktur
СОДЕРЖАНИЕ
02 июня 2020

Vue.js Tutorial für Anfänger


Wann immer Sie neue Technologien in Ihrem Entwicklungsablauf einsetzen, fühlen Sie sich möglicherweise zumindest ein wenig eingeschüchtert. Vor allem, wenn es in freier Wildbahn unzählige npm-Pakete gibt. Das Mischen und Anpassen von Dingen kann manchmal viel Zeit und Mühe kosten und ist normalerweise frustrierend. Hier kommt das folgende Vue.js-Tutorial für Anfänger ins Spiel.

Was ist Vue.js? Warum sollte es dich interessieren??

Vue.js oder kurz Vue ist ein JavaScript-Framework zum Erstellen von Benutzeroberflächen. Im Vergleich zu anderen Frameworks wie Angular oder React ist Vue zugänglicher und weist keine so steile Lernkurve auf.

Vue ist auch modular aufgebaut und ermöglicht es Ihnen, Ihren Code in wiederverwendbare Komponenten aufzuteilen. Jeder von ihnen hat sein eigenes HTML-Markup, CSS und JavaScript-Code.

Was ist der Umfang dieses Vue.js-Tutorials??

Der Zweck dieses kurzen Vue.js-Tutorials besteht darin, Ihnen ein Gerüst zur Verfügung zu stellen, auf dem Sie mit Vue bauen und experimentieren können. Wir werden uns ein grundlegendes Setup einer Vue-App im WordPress-Dashboard ansehen.

(Hinweis: Wir werden Ihnen in diesem Handbuch nicht Vue per se beibringen, aber Sie können fortfahren und mehr über das Framework aus dem erfahren offizieller Führer Nachdem Sie das Projekt hier eingerichtet haben, können Sie weiter experimentieren, nachdem wir fertig sind. Außerdem empfehlen wir einige der interessantesten Vue UI-Komponentenbibliotheken, die den Entwicklungsprozess effizienter gestalten.)

Wir werden eine vordefinierte Vorlage für WordPress-Plugins verwenden, die Vue verwenden. Sie finden es im folgenden GitHub-Repository, wenn Sie einen genaueren Blick darauf werfen möchten: https://github.com/abaicus/vue-wp-bootstrap.

Vue.js Tutorial: Voraussetzungen

Es gibt einige Dinge, die Sie bereits auf Ihrem Computer eingerichtet haben sollten, um mit diesem Handbuch fortzufahren:

Zunächst benötigen Sie einen LAMP-Stack. Sie können XAMPP unter Windows oder Mac oder Local by Flywheel unter Mac verwenden und dann eine neue lokale WordPress-Installation einrichten.

Stellen Sie sicher, dass Sie die haben NodeJS-Paketmanager (npm) auf Ihrem Computer installiert. Sie müssen außerdem zwei weitere Pakete über das Terminal installieren – die Vue-CLI und das Initialisierungstool für Vue-Vorlagen. Wie so:

$ npm install -g @ vue / cli
$ npm install -g @ vue / cli-init

Nachdem Sie diese beiden Abhängigkeiten installiert haben, müssen Sie das Active Directory in das Verzeichnis wp-content / plugins Ihrer lokalen WordPress-Instanz ändern und dort den folgenden Befehl ausführen:

$ vue init abaicus / vue-wp-bootstrap my-vue-dashboard-plugin

Als nächstes werden Sie aufgefordert, einige Fragen zur Einrichtung Ihres Projekts zu beantworten.

Wählen Sie für die Eingabeaufforderung “Erstellen” zunächst die erste Option aus "Runtime + Compiler: Empfohlen für die meisten Benutzer".

Sie können ESLint Linter aktivieren, wenn Sie möchten. Es erkennt alle Flusenfehler in Ihrem Projekt, aber Sie müssen sich jetzt nicht unbedingt darum kümmern.

Commit Lint- und Pre-Commit-Hooks sollen Ihre Commit-Nachrichten und den Code überprüfen, bevor Sie ein Commit an GitHub senden – damit alles ordentlich und gut formatiert bleibt.

Sie werden mit einem Terminal enden, das mehr oder weniger so aussieht, wenn Sie fertig sind:

Sie können den Anweisungen auf dem Bildschirm folgen. Ändern Sie das Verzeichnis in das neu generierte Plugin-Verzeichnis und führen Sie die in der Terminal-Eingabeaufforderung angezeigten Befehle aus. Dadurch wird Ihre Anwendung betriebsbereit und wartet auf Änderungen in Ihrem Code. Außerdem wird der Vue-Code in JavaScript übertragen.

Was tut es?

Nicht viel. Dies ist nur eine Basisanwendung, die einige Daten aus dem Backend anzeigt. Nicht viel Vue unter der Haube. Sie können zur Seite Plugins Dashboard gehen und diese aktivieren. Es wird eine neue Seite in Ihr Admin-Menü eingefügt. Wenn Sie dorthin navigieren, finden Sie eine Dashboard-Seite mit zwei Zeichenfolgen:

Die Plugin-Gerüststruktur

Werfen wir einen Blick auf die Dateistruktur des neu generierten Plugins. Wir werden die meisten Konfigurationsdateien in diesem Vue.js-Tutorial ignorieren, damit wir uns auf die Struktur der Anwendung konzentrieren können:

Zuerst haben wir die Datei plugin.php, die der Einstiegspunkt für das eigentliche Plugin ist. Hier haben wir die Haupt Plugin Klasse. Hier werden die Hauptkomponenten der Anwendung eingeschlossen und ausgeführt.

Als nächstes gibt es die Datei package.json, in der alle Abhängigkeiten und eine Reihe anderer Projektinformationen definiert sind. Der Teil, an dem Sie interessiert sein könnten, lebt unter dem "Skripte" Feld. Dort haben Sie alle Befehle, die Sie mit dem Präfix npm run ausführen können. Die wichtigsten sollten vorerst npm run dev (das die Anwendung für die Entwicklung erstellt) und npm run build (das Sie ausführen sollten, sobald Sie bereit sind, Ihre App für die Produktion bereitzustellen) sein. Die anderen Befehle befinden sich neben diesen beiden oder erledigen andere Aufgaben, über die Sie sich in diesem Moment keine Sorgen machen sollten.

Im Includes-Verzeichnis befinden sich drei Dateien:

  • Die rest.php-Klasse führt derzeit keine Aktionen aus, Sie haben jedoch bereits eine Struktur zum Hinzufügen Ihrer RestAPI-Routen
  • Die Assets.php-Klasse verwaltet die Stil- und Skript-Warteschlange. Hier ist die JavaScript-Datei lokalisiert, um Startdaten von PHP an unsere Vue-App zu übergeben. Im Moment werden nur zwei Texte gesendet, aber Sie können alles einschließen, was Sie wollen.
  • Die Datei admin.php sorgt dafür, dass eine neue Seite im Dashboard hinzugefügt und die eigentliche Plugin-Seite gerendert wird. Sie werden feststellen, dass die App selbst als zwei leere Tags in der Funktion plugin_page () gerendert wird. Dies liegt daran, dass das JavaScript das eigentliche Rendern der Anwendung nach dem Laden übernimmt.

Im Assets-Verzeichnis finden Sie vier weitere Verzeichnisse:

  • Das src-Verzeichnis – die Quelldateien für unsere Vue-App, über die wir später sprechen werden.
  • Das scss-Verzeichnis – die SCSS-Stildateien, aus denen wir das CSS-Stylesheet generieren.
  • Das js-Verzeichnis – der transpilierte Code, der aus unseren Dateien im src-Verzeichnis generiert wird.
  • Das CSS-Verzeichnis – der kompilierte Stil aus den SCSS-Dateien.

Das src-Verzeichnis und die Vue-Vorlagendateien

In diesem Verzeichnis befinden sich zwei Dateien: main.js und App.vue. Die Datei main.js ist der Einstiegspunkt für die Anwendung. Es hängt die Vue-App-Komponente mit der entsprechenden ID an das DOM-Element an.

/ * jshint esversion: 6 * /
importiere Vue von ‘vue’
App aus ‘./App.vue’ importieren

window.addEventListener (‘load’, function () {
new Vue ({// eslint-disable-line no-new
el: ‘# mvdp-app’,
Komponenten: {App},
rendern: (h) => h (App)
})
})

Das eigentliche Anwendungsmarkup befindet sich in der App.vue-Vorlage:

/ * jshint esversion: 6 * /

{{this.strings.title}}

{{this.strings.description}}

/ * globales MVDP * /
Standard exportieren {
Daten () {
Rückkehr {
Zeichenfolgen: MVDP.strings
}}
}},
Name: ‘App.vue’
}}

Im obigen Snippet sehen Sie, dass wir die Zeichenfolgen verwenden, die wir in der Assets-Klasse lokalisiert haben. Eine der großartigen Funktionen von Vue ist, dass der Code der Komponente übersichtlich in Vorlagen, Skripten und Stilen organisiert ist, um das Verständnis der Struktur zu erleichtern.

Jetzt haben Sie einen soliden Ausgangspunkt für alles, was Sie mit Vue.js weiterentwickeln möchten! Ich hoffe, dieses Tutorial von Vue.j war hilfreich.

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Layout, Präsentation und Bearbeitung von Karol K..

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector