Die Fallstricke beim Erlernen von Vue.js

Rangfolge ohne bestimmte Reihenfolge

In letzter Zeit scheint er nur einige Blogs über das Leben und Beschwerden gepostet zu haben. Wenn er nichts zum Thema Technologie aktualisiert, denken manche Leute vielleicht, er sei wieder faul.

Okay, dann fange ich an, so zu tun, als ob.

Klasse void zeigen

Es handelt sich um eine Art Fehler, der dem Nullzeiger ähnelt. Er wird auf der Konsole nicht als Fehler gemeldet und ist sehr schwer zu finden.

bzw. Daten.Benutzer.Avatar

//Wenn der Benutzer null ist, wird dieser Aufruf keinen Fehler melden und nicht weiter ausgeführt. Das ist sehr knifflig. //Wenn Sie den Avatar beurteilen möchten, tun Sie dies, wenn (resp.data.user && resp.data.user.avatar) {
 //Tun...
}

ES6-Pfeilfunktionen

Es gibt auch einen großen Unterschied zwischen Pfeilfunktionen und Nicht-Pfeilfunktionen

//Gewöhnliche anonyme Funktion, die api() schreibt
.dann(Funktion(bzw.){
 dies.zählen()
 //Beachten Sie, dass dies keine normale Zählung ist und undefiniert ist
})


//ES6 Pfeilfunktion api()
.then(resp => {
 dies.zählen()
 //Hier ist nichts falsch})

vuetify

Dies ist ein UI-Framework basierend auf der Material Design-Sprache von Google, das auf Vue.js ausgeführt werden kann.

Es ist lediglich so, dass die Installationsmethode etwas speziell ist und auch die Installationsmethode des Plug-Ins speziell ist.

Zum Beispiel der Dialog von vuetify

Importieren Sie VuetifyDialog aus „vuetify-dialog“.
importiere vuetify aus „./plugins/vuetify“;

Vue.use(VuetifyDialog, {
 Kontext: {
 vuetify
 }
})

Dies bedeutet, dass Sie beim Schreiben der Benutzeroberfläche für Google programmieren müssen. (Obwohl andere Backend-Sprachen ähnlich sind)

vue-cli

Wenn Sie ein neues Projekt erstellen und das Projekt nicht besonders groß ist.

Ich empfehle Ihnen dringend, zur Erstellung vue-cli zu verwenden, da dies, einfach ausgedrückt, den B-Stil verbessert.

Hör auf, Unsinn zu reden und sieh das Bild

vue erstellen Sie Ihren_Projektnamen

Vue-Benutzeroberfläche

Vue UI öffnet eine Visualisierungsseite wie die oben.

Importieren Sie dann das von vue-cli erstellte Projekt und es wird mit dem Bild oben identisch sein:)

Asynchron und synchron

Eigentlich hatte ich vorher eine ganz dumme Idee.

Nachdem der Benutzer das Formular ausgefüllt hat, wird es sofort vom Server überprüft und das Ergebnis auf der Benutzeroberfläche aktualisiert.

Zum Aktualisieren der Benutzeroberfläche ist jedoch ein synchroner Vorgang erforderlich.

Ich habe einfach immer wieder versucht herauszufinden, wie ich den asynchronen Betrieb von Axios in einen synchronen umwandeln kann.

Wenn es sich um das vorherige jQuery handelt, ist es ganz einfach. Sie müssen lediglich das aysnc-Attribut darin ändern.

Allerdings zeigt der Browser bei jeder Anfrage in der Konsole an, dass synchrone XHR-Anfragen nicht empfohlen werden.

Warum? Weil die Seite im Browser einfädig ist. Wenn Ihre Anfrage synchron ist, führt jede Anfrage dazu, dass die Seite für einen bestimmten Zeitraum hängen bleibt.

Daher bin ich schließlich zu einer schrittweisen Überprüfungsmethode übergegangen, um alle Anfragen asynchron zu machen.

Ausführen und Bereitstellen

Wenn Sie lokal entwickeln

Durch Ausführen von „serve“ (oder „dev“ bei einigen Projekten) wird eine Portnummer geöffnet, über die Sie auf die Benutzeroberfläche zugreifen und nahezu in Echtzeit UI-Anpassungen vornehmen können.

Wenn Sie es online bereitstellen möchten, müssen Sie zuerst „Build“ ausführen, wodurch statische Dateien im Ausgabeverzeichnis generiert werden.

Stellen Sie diese Dateien wie folgt auf dem Server bereit:

• nginx
• Caddie

Hier empfehle ich wärmstens Caddy, einen auf Golang basierenden Server. Er ist leicht zu implementieren und verfügt über eine Verwaltungs-API. Er unterstützt Http2 sehr gut und unterstützt http3.

TIPPS

Dies sind nur einige der Projekte, mit denen ich gerade angefangen habe zu spielen. Bei der weiteren Entwicklung werden weitere Probleme auftreten.
Beispielsweise das Aktualisieren zwischen Seiten usw.

Es wird also bald ein weiteres Kapitel geben.

Hoffe, das hilft.

Oben sind die Einzelheiten zu den Fallstricken aufgeführt, die beim Erlernen von Vue.js auftreten. Weitere Informationen zu den Fallstricken beim Erlernen von Vue.js finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!