Was sind die Vue-Entwicklungstools?
Vue-Entwicklungstools: 1. Vue Press;
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Zusätzlich zu JavaScript verfügt das Front-End jetzt auch über drei Frameworks: React, Vue und Angular, die auf dem Markt häufiger verwendet werden. Man kann sagen, dass diese drei Frameworks den Status des Front-Ends verändert haben Im Vergleich zu Angular verfügt Vue auch über eine Fülle von Anweisungen und ist ein relativ leichtes Vue-Framework, das derzeit von vielen Entwicklern verwendet wird und daher immer beliebter wird Es ist auch vollständiger geworden. Es gibt auch viele verwandte Tools, die hauptsächlich auf der Lernkurve und der klaren Designstruktur und Nutzungsdokumentation basieren, sodass erfahrene Entwickler problemlos von anderen Frameworks ausgehen können. Lassen Sie mich Ihnen vorstellen, was die Entwicklungstools von Vue sind.
Vue CLIUm Entwicklern den schnellen Einstieg zu erleichtern, bietet es CLI-ähnliche Gerüsttools wie das seltsame Framework, das für die schnelle Vue-Standardisierung verwendet werden kann Die Tool-Basis im Vue-Ökosystem stellt sicher, dass verschiedene Build-Tools basierend auf intelligenten Standardkonfigurationen reibungslos verbunden werden können, sodass Sie sich auf das Schreiben von Anwendungen konzentrieren können, ohne sich lange um Konfigurationsprobleme kümmern zu müssen. Beispielsweise können Sie Plug-Ins schnell und einfach integrieren -ins wie Babel, TypeScript, ESLint, PostCSS, Jest, Mocha, Nightwatch und Cypress.
Vue PressVuePress ist ein statischer Website-Generator, der von Vue, Vue Router und Webpack gesteuert wird. In VuePress können Sie Dokumente schreiben und dann Webseiten generieren. Jede Seite wird von generiert. Die von VuePress generierten Seiten verfügen über vorgerendertes HTML, sodass sie eine sehr gute Ladeleistung und Suchmaschinenoptimierung aufweisen. Sobald die Seite geladen ist, übernimmt Vue gleichzeitig den Inhalt und konvertiert ihn in einen Vollständige Einzelseitenanwendung. Andere Seiten müssen nur geladen werden, wenn der Benutzer zu ihnen navigiert Dies kann auch als globale Statusverwaltung bezeichnet werden. Ein einfaches Verständnis besteht darin, dass Sie, nachdem Sie Daten im Status definiert haben, diese in jeder Komponente im Projekt abrufen und ändern können und der geänderte Teil globale Antwortänderungen in jeder Vuex-Anwendung erhalten kann Der Kern ist der Store, der als Container verwendet werden kann und den Großteil des Status in der Anwendung enthält.
NuxtNuxt.js ist ein leichtes Anwendungsframework, das auf Vue.js basiert. Es kann auch als statische Site-Engine zum Generieren statischer Site-Anwendungen verwendet werden eine elegante Codestrukturschichtung sowie Hot-Loading und andere Funktionen.
VuetifyVuetify ist derzeit eine der besten UI-Komponentenbibliotheken auf Basis von Veu. Sie bietet eine große Anzahl sorgfältig erstellter Komponenten, die auf Materialdesign-Spezifikationen basieren und die Anforderungen jeder Anwendung erfüllen können.
QuasarQuasar ist ein MIT-lizenziertes Open-Source-Framework auf Basis von Vue, das Webentwicklern dabei helfen kann, reaktionsfähige Websites, PWAs zum Erstellen mobiler APPs über Apacha Cordova und plattformübergreifende Anwendungen zu erstellen. Quasar erfordert, dass Entwickler etwa einmal Code schreiben Verwenden Sie dieselbe Codebasis, um sie gleichzeitig als Website, PWA, Mobile APP und Electron App bereitzustellen. Verwenden Sie die fortschrittlichste CLI, um Anwendungen zu entwerfen und sorgfältig geschriebene, sehr schnelle Quasar-Webkomponenten bereitzustellen Normalerweise habe ich einige Probleme beim Entwickeln von Komponenten, insbesondere bei öffentlichen Komponenten oder Komponenten von Drittanbietern. Bei der Vorschau von Komponenten kann ich sie nicht klar erkennen und auch nicht gut darauf reagieren Zustände von Komponenten,
Automatisierte Interaktionstests können Enzyme verwenden, aber oft müssen Sie manuell testen,
Beim Schreiben von Dokumenten müssen Sie die Komponentenvorschau und das Dokument zusammen schreiben und verschiedene Zustände wechseln,
Storbook ist also entstanden, um diese Probleme zu lösen. Es kann eine leistungsstarke Entwicklungsumgebung für Komponenten erstellen und bietet hauptsächlich die folgenden Punkte: Bietet eine leistungsstarke UI-Komponentenverwaltungsseite, die sehr bequem und übersichtlich gruppiert werden kann Komponenten oder unterschiedliche Zustände einer Komponente
- Zusätzlich zu automatisierten Interaktionstests können problemlos manuelle Interaktionstests durchgeführt werden, und Komponentenparameter können dynamisch geändert werden, um Ansichtsänderungen anzuzeigen
- Sie können Komponentenvorschauen als statische Ressourcen exportieren. Damit Sie die Dokumentation der Komponente und verschiedene Ansichten, die verschiedenen Parametern entsprechen, sowie eine Reihe von Plug-Ins einfach anzeigen können, um uns dabei zu helfen, die Arbeit zum Entwickeln, Testen und Optimieren von Komponenten besser abzuschließen.
Dieses Tool ermöglicht es Entwicklern, diese unabhängig von den Hauptanwendungskomponenten in einer isolierten Entwicklungsumgebung interaktiv darzustellen, ohne sich um anwendungsspezifische Abhängigkeiten und Anforderungen kümmern zu müssen, was es für Entwickler, Designer usw. bequem macht. Menschen beteiligen sich an Projekten.
Visual Studio Code
Visual Studio Code (kurz „VS Code“) ist ein Programm, das Microsoft auf der Build Developer Conference am 30. April 2015 offiziell angekündigt hat und das auf Mac OS X, Windows und Linux A läuft plattformübergreifender Quellcode-Editor zum Schreiben moderner Web- und Cloud-Anwendungen, der auf dem Desktop läuft und für Windows, macOS und Linux verfügbar ist. Es verfügt über integrierte Unterstützung für JavaScript, TypeScript und Node.js sowie ein umfangreiches Ökosystem an Erweiterungen für andere Sprachen (wie C++, C#, Java, Python, PHP, Go) und Laufzeiten (wie .NET und Einheit).
WebStorm
WebStorm ist ein JavaScript-Entwicklungstool von JetBrains. Es wurde von der Mehrheit der chinesischen JS-Entwickler als „Web-Front-End-Entwicklungsartefakt“, „leistungsstärkster HTML5-Editor“, „intelligentste JavaScript-IDE“ usw. gelobt. Es hat denselben Ursprung wie IntelliJ IDEA und erbt die Funktionen des leistungsstarken JS-Teils von IntelliJ IDEA.
Verwandte Empfehlungen: „vue.js Tutorial“
Das obige ist der detaillierte Inhalt vonWas sind die Vue-Entwicklungstools?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.

Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

In Vue.js können Komponenten oder Ressourcen bei Bedarf dynamisch geladen werden, wodurch die Ladezeit der Anfangsseite dynamisch geladen und die Leistung verbessert wird. Die spezifische Implementierungsmethode umfasst die Verwendung & lt; Keep-Alive & GT; und & lt; Komponente ist & gt; Komponenten. Es ist zu beachten, dass fauler Laden FOUC -Probleme (Splace Screen) verursachen kann und nur für Komponenten verwendet werden sollte, die eine faule Belastung erfordern, um unnötige Leistungsaufwand zu vermeiden.

Implementieren Sie Marquee/Text-Scrolling-Effekte in VUE unter Verwendung von CSS-Animationen oder Bibliotheken von Drittanbietern. In diesem Artikel wird die Verwendung von CSS -Animation vorgestellt: Bildlauftext erstellen und Text mit & lt; div & gt;. Definieren Sie CSS -Animationen und setzen Sie Überlauf: Versteckt, Breite und Animation. Definieren Sie Keyframes, setzen Sie Transformation: Translatex () am Anfang und am Ende der Animation. Passen Sie die Animationseigenschaften wie Dauer, Bildlaufgeschwindigkeit und Richtung an.

Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.

Sie können die Vue -Version mit Vue Devtools abfragen, um die Registerkarte VUE in der Konsole des Browsers anzuzeigen. Verwenden Sie NPM, um den Befehl "npm list -g vue" auszuführen. Suchen Sie das Vue -Element im Objekt "Abhängigkeiten" der Datei package.json. Führen Sie für Vue -CLI -Projekte den Befehl "Vue --version" aus. Überprüfen Sie die Versionsinformationen im & lt; Skript & gt; Tag in der HTML -Datei, die sich auf die VUE -Datei bezieht.

Es gibt drei gängige Methoden für Vue.js, um Arrays und Objekte zu durchqueren: Die V-für-Anweisung wird verwendet, um jedes Element zu durchqueren und Vorlagen zu rendern; Die V-Bind-Anweisung kann mit V-für dynamisch Attributwerte für jedes Element verwendet werden. und die .MAP -Methode kann Array -Elemente in Neuarrays umwandeln.
