Vorbereitung der Vue Element-Front-End-Anwendungsentwicklung für die Entwicklungsumgebung

Überblick

Bisher wurde VS für verschiedene Frontend- und Backend-Entwicklungen verwendet. Je nach Projektbedarf integrieren wir nach und nach das reine Frontend-Entwicklungsmodell. Wir haben begonnen, hauptsächlich Vue + Element für die BS-Frontend-Entwicklung auszuwählen. In Zukunft werden wir das Vue + AntDesign-Schnittstellenkit weiter integrieren, um zwei verschiedene Schnittstellenframeworks anzuzeigen. Die Front-End-Entwicklung mit Vue + Element erfordert eine grundlegende Abkehr vom bisherigen Entwicklungsmodell und erfordert die Auseinandersetzung mit mehr relevantem Wissen. Diese Aufsatzreihe basiert auf einem schrittweisen Lern- und Forschungsansatz. Sie bietet eine vollständige Einführung in alle Aspekte der Front-End-Entwicklung mit Vue + Element und kombiniert die vorhandenen Framework-Funktionen des BS-Front-Ends, um beides zu integrieren. In diesem Artikel wird hauptsächlich die Vorbereitung der Entwicklungsumgebung vorgestellt, einschließlich der Notwendigkeit, relevante Entwicklungstools, Plug-In-Unterstützung usw. vorzubereiten, sowie die automatische Korrekturverarbeitung für Entwicklungsspeicherungen, das Debuggen von Konfigurationsinhalten usw.

1. Entwickeln Sie die erforderliche Softwareumgebung

Anders als bei der vorherigen Asp.net-Entwicklung wird bei der reinen Front-End-Entwicklung im Allgemeinen nicht mehr das sperrige VS für die Front-End-Entwicklung verwendet, sondern stattdessen leichte Entwicklungstools wie VS Code oder WebStorm, um Front-End-Code zu entwickeln und zu verwalten. Obwohl es sich um ein leichtes Entwicklungstool handelt, sind seine Funktionen auch sehr leistungsstark und die Entwicklungsumgebung kann auf einem Windows-System oder einem Mac-System usw. sein, um eine plattformübergreifende Entwicklungsumgebung zu erreichen.

1) Installation von VS-Code

VS Code (Visual Studio Code) ist ein kostenloser, plattformübergreifender Open Source-Text(Code)-Editor, der von Microsoft entwickelt wurde. Ein nahezu perfekter Editor.

Offizielle Website: https://code.visualstudio.com

Dokumentation: https://code.visualstudio.com/docs

Quellcode: https://github.com/Microsoft/vscode

Die Schnittstelle von VS Code ist ungefähr wie unten dargestellt. Wenn die Schnittstelle englisch ist, können Sie nach der Installation im Allgemeinen das chinesische Paket installieren.

Nach der Installation von VS Code müssen wir im Allgemeinen einige erforderliche Plug-Ins suchen und installieren, um die Entwicklung zu unterstützen. Die Installation des Plug-Ins ist sehr einfach. Nachdem Sie es im Suchfeld gefunden haben, können Sie es direkt installieren.

Im Allgemeinen müssen wir diese VS-Code-Plugins installieren:

Vetur

Multifunktionales integriertes Vue-Plug-in, einschließlich: Syntaxhervorhebung, intelligente Eingabeaufforderungen, Emmet, Fehleraufforderungen, Formatierung, automatische Vervollständigung, Debugger. Das offizielle Vue-Plugin für vscode, ein Muss für Vue-Entwickler.

ESLint

ESLint ist ein Tool zur Überprüfung von Grammatikregeln und Codestilen, mit dem sichergestellt werden kann, dass grammatikalisch korrekter und stilkonsistenter Code geschrieben wird.

Das ESLint-Plug-In in VSCode integriert die Funktionen von ESLint direkt und kann nach der Installation verwendet werden. Die Details des Codeformats und der Spezifikationen können ebenfalls angepasst werden, und ein Team kann dieselbe Konfigurationsdatei gemeinsam nutzen, sodass der von jedem im Team geschriebene Code dieselbe Codespezifikation verwenden kann und jeder seine eigene Codespezifikationsprüfung durchführen kann, bevor er den Code eincheckt.

VS Code - Debugger für Chrome Ein Plug-in zum Debuggen mit Chrome

Dieses Tool ist für die Front-End-Entwicklung absolut unverzichtbar und wird Ihre Entwicklungs- und Debugging-Modi erheblich verändern.

In der Vergangenheit bestand das Front-End-Debugging hauptsächlich aus JavaScript-Debugging. Sie mussten den entsprechenden Codeteil in der Chrome-Konsole finden, Haltepunkte hinzufügen und dann schrittweise durch die Chrome-Konsole gehen, um die Wertänderungen anzuzeigen.

Nachdem Sie Debugger für Chrome verwendet haben, können Sie, wenn der Code in Chrome ausgeführt wird, Haltepunkte direkt in VSCode hinzufügen. Nach dem Klicken auf „Ausführen“ wird die Seite in Chrome weiter ausgeführt. Wenn der Haltepunkt erreicht ist, den Sie in VSCode hinzugefügt haben, können Sie direkt in VSCode ein Einzelschritt-Debugging durchführen.

Verschönern

Mit dem Beautify-Plug-in können Sie Ihren Code schnell formatieren, sodass Ihre unordentliche Codestruktur beim Schreiben sofort sehr regelmäßig wird. Es ist ein Muss für Menschen mit einer Code-Zwangsstörung. Ein besseres Codeformat ist bei späterer Wartung und beim Lesen durch andere sehr praktisch.

2) Installieren Sie die Knotenentwicklungsumgebung

Bei der Entwicklung mit VS Code müssen wir häufig die Befehlszeile npm verwenden, um zugehörige Module zu installieren. Diese erfordern die Unterstützung der Node-Umgebung. Nach der Installation von Node wird auch npm zusammen installiert.

Knoten-Download: https://nodejs.org/en/

Nach der Installation können wir die Versionsnummern von Node und NPM über die Befehlszeile oder Shell in VS Code überprüfen.

Knoten -v

npm -v

3) Installation des Vue-Gerüsts

Vue (ausgesprochen /vjuː/, ähnlich wie „view“) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen.

Global installieren:

npm installiere vue-cli -g

Globale Deinstallation:

npm deinstallieren vue-cli -g

4) Installation des Vue DevTool Chrome-Plugins

Dieses Plug-In ist auch ein notwendiges Chrome-Plug-In für die Entwicklung von Vue. Im Allgemeinen gibt es kein externes Netzwerk, sodass es nicht direkt auf der offiziellen Chrome-Plug-In-Website installiert werden kann. Das Herunterladen und Kompilieren über GitHub ist für die Installation zu mühsam. Später wurde es erfolgreich heruntergeladen und auf einer Website installiert.

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2. Konfiguration und Nutzung der Entwicklungsumgebung

Für die automatische Codekorrekturverarbeitung wie Vetur müssen wir sie in VS Code unter [Datei] [Einstellungen] [Einstellungen] einrichten und dann auf Settings.json klicken, um sie zu bearbeiten.

Hier richte ich hauptsächlich die allgemeine Verarbeitung des Einrückens und Setzens des Codes nach dem Speichern ein.

Um den VScode mit Chrome zu debuggen, müssen wir das Plugin „Debugger für Chrome“ installieren und dann den Vue-Projektcode einrichten.

Öffnen Sie die Datei Vue.Config.js im Stammverzeichnis des Projekts und fügen Sie productionSourceMap:true und devtool:'source-map' an den entsprechenden Stellen hinzu, wie unten gezeigt

Legen Sie dann im Ausführungsbereich die Debugparameter wie unten gezeigt fest.

Nachdem wir diese Einstellungen festgelegt haben, können wir den Code in VS Code im Debug-Modus debuggen. Der Code muss nur die entsprechenden Haltepunkte festlegen, um die Daten des Objekts zu verfolgen.

Denken Sie vor dem Debuggen daran, das Projekt mit npm run dev zu starten. Nachdem das Projekt vollständig gestartet ist, wird die Projektadresse im Chrome-Browser geöffnet. Verwenden Sie dann F5, um den Projektcode zu debuggen.

Vue DevTools wird auch zum Verfolgen des Vue-Projektverlaufs, des Status und anderer Informationen verwendet, wodurch Informationen sehr gut verfolgt und verarbeitet werden können.

Um das Vue DevTools-Symbol im Chrome-Browser aufleuchten zu lassen, können wir der main.js des Vue-Projekts eine Codezeile hinzufügen.

Vue.config.devtools=process.env.NODE_ENV==='development' wie in der folgenden Schnittstelle gezeigt

Dieser Aufsatz ist eine einfache Einführung. Er stellt hauptsächlich die Installation der VS Code-Umgebung, die Konfiguration des entsprechenden Plug-Ins und das Debuggen des Projektcodes in Verbindung mit Chrome vor.

Oben finden Sie den detaillierten Inhalt der Vorbereitungsarbeiten für die Entwicklungsumgebung der Vue Element-Frontend-Anwendungsentwicklung. Weitere Informationen zu den Vorbereitungsarbeiten für die Entwicklungsumgebung der Vue Element-Frontend-Anwendungsentwicklung finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!