Detaillierte Erläuterung der Verwendung der Vue-Syntax im Webstorm

Dieses Mal werde ich Ihnen die Verwendung der Vue-Syntax im Webstorm ausführlich erklären. Was sind die Vorsichtsmaßnahmen bei der Verwendung der Vue-Syntax im Webstorm?

Wie das Sprichwort sagt: Wenn Sie Jade angreifen wollen, müssen Sie zuerst Ihre Waffe schärfen. Ich verwende bei der Arbeit immer Angular für die Entwicklung, aber nach und nach wird es Vue-Geschäfte geben, also muss ich Vue lernen. Ich habe heute angefangen, mit vue herumzuspielen, um das Frontend zu entwickeln. Nachdem ich ein Projekt mit vue-cli erstellt hatte, gab es keine Fehlermeldung, aber viele verschiedene Änderungen Das Gerät warnt, aber ich habe keine andere Wahl, als die Unterstützung der IDE für Vue zu verbessern.

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 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 während des vorherigen Vorgangs gelöscht habe):

Einstellungen > Editor > >

Ziehen Sie nach unten, um vue.js-Vorlagen auszuwählen, 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 sehen Sie, dass es ein

gibt Fortschritt unter Webstorm Nachdem die Leiste

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:

Teilen regelmäßiger JS-Anwendungsfälle

Detaillierte Erläuterung der asynchronen Programmierimplementierung Node Async/Await

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