Detaillierte Erläuterung der Vue-Anwendungsfälle im Webstorm

Dieses Mal werde ich Ihnen die Anwendungsfälle von Vue im Webstorm ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue im Webstorm?

Prämisse

In der offiziellen Dokumentation von Vue wird empfohlen, dass Anfänger nicht zuerst vue-cli verwenden, sondern Vue direkt auf ähnliche Weise wie JQuery zum Lernen einführen sollten. Da ich mich bereits zuvor mit der CLI von Angular beschäftigt habe, werde ich direkt mit der CLI beginnen.

Angenommen, wir haben Node und NPM bereits installiert.

vue-cli global installieren

Führen Sie den Befehl im Terminal aus:

npm install --global vue-cli

vue-cli global installieren. Verwenden Sie dann vue-cli, um unser Projekt zu erstellen:

vue init webpack my-project

Auf diese Weise haben wir ein vollständiges Projekt, in dem sich eine Beispielkomponente befindet. Führen Sie Folgendes aus:

npm run dev

und greifen Sie darauf zu Im Browser können Sie den laufenden Status des Projekts unter http://localhost:8081/ sehen.

Versuch mit Webstorm

Als ich das Vue-Projekt in Webstorm öffnete, wollte ich Vue fast aufgeben, ich konnte es wirklich nicht ertragen, es anzusehen. Aber ich muss meinen konsequenten Entdeckergeist weiterführen. Wenn Sie auf ein Problem stoßen, lösen Sie es!

Dateien vom Typ .vue

Zuerst müssen wir mit dem Dateityp beginnen. In der aktuellen Version gibt es keinen .vue-Dateityp, daher kann er nicht erkannt werden . Es kann nicht hervorgehoben werden, und selbst wenn es erkannt wird, ist es chaotisch. Nach der Überprüfung sagten einige, es wäre besser, *.vue zum Dateityp hinzuzufügen, aber wenn ich es hinzufüge, würde es noch verwirrender werden.

Nachdem ich lange bei Google gesucht habe, habe ich diesen Artikel gefunden, der von der offiziellen Website von Webstorm https://www.jetbrains.com/help/webstorm/vue-js stammt .html. Webstorm unterstützt Vue bereits, aber ich kann diese Option in meinem lokalen Webstorm überhaupt nicht finden.

Nachdem ich es nachgeschlagen hatte, stellte ich fest, dass die Version von Webstorm die Version 2018 ist und mein Webstorm 2017.2 ist. Daher muss ich auf die neueste Version aktualisieren.

Ja, sichern Sie die Webstorm-Einstellungen und laden Sie dann den neuesten Webstorm und das neueste Update herunter. Übrigens habe ich einen Aktivierungscode gefunden: http://hb5.s.osidea.cc:1017 (er ist aktuell und kann für persönliche Tests verwendet werden).

Tatsächlich habe ich nach der Installation die Vue-Markierung gefunden und die neue Version unterstützt sie tatsächlich.

Aber ich habe festgestellt, dass die .vue-Datei immer noch keine Hervorhebung aufweist. Es scheint, dass ich noch Dateiunterstützung hinzufügen muss (ich weiß nicht, ob ich sie während des vorherigen Vorgangs gelöscht habe):

Einstellungen > Dateitypen

Ziehen Sie es nach unten, wählen Sie vue.js-Vorlagen aus, klicken Sie auf und dann auf das Pluszeichen in den registrierten Mustern unten, geben Sie dann *.vue ein, klicken Sie dann auf OK, klicken Sie auf Übernehmen, und dann wird ein Fortschrittsbalken Gehen Sie unter Webstorm zu Sobald es voll ist, ist die Hervorhebung von .vue normal.

unbenutzter Exportstandard

Es gibt einen Exportstandard in der js in der Vue-Komponente. Wenn Sie die Maus nach oben bewegen, wird dies angezeigt Finden Sie die Eingabeaufforderung für den nicht verwendeten Export. Dies liegt daran, dass dieser Export nicht speziell verwendet wird. Es handelt sich um einen Syntaxhinweis für

JavaScript. Wir können es in der Inspektionskonfiguration der IDE konfigurieren.

Der schnelle Weg ist: Klicken Sie auf den kleinen Kopf in der unteren rechten Ecke „Inspektion konfigurieren“. Wählen Sie in der Popup-Oberfläche: JavaScript 》 Allgemein. Option entfernen: unbenutztes globales Symbol. Klicken Sie dann auf OK und Sie können sehen, dass die graue Erinnerung verschwindet.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der JS-Schritte zum Abrufen von URL-Parametern und Senden eines POST im JSON-Format

JS-Aktualisierungsseite Methodenzusammenfassung

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Vue-Anwendungsfälle im Webstorm. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!