Erste Schritte mit Vue.js

Einführung

vue.js ist eine clientseitige js-Bibliothek, die zum Entwickeln von Single-Page-Anwendungen verwendet werden kann. Um ein Projekt auszuwählen, habe ich mir nacheinander Angular, React und Vuejs angeschaut. Ich bewunderte die ersten beiden und liebte die letzteren. Weil es einfach und übersichtlich ist und über eine erweiterte Implementierung von Webkomponenten verfügt. Auch wenn es nicht viel Dokumentation gibt, würde ich es wählen. Als nächstes erstellen wir zunächst ein Startprojekt und gehen die am Entwicklungsprozess beteiligten Konzepte und Komponenten durch.

vue.js

Der Entwicklungsprozess anständiger Vuejs wird fast immer mit Webpack und Babel kombiniert. Für diejenigen, die gerne von Grund auf hacken, möchte ich Ihnen sagen, dass die Konfiguration äußerst umständlich ist. Glücklicherweise bietet vue.js ein Tool namens vue-cli. Kann verwendet werden, um schnell den Startcode für eine Single-Page-Anwendung zu erstellen. Starten Sie häufig verwendete Entwicklungsfunktionen in nur einer Minute:

Gerüstcode verfügbar.

Heißes Nachladen. Automatisches Neuladen nach Aktualisierung des Komponentencodes

Statische Codeprüfung.

ES6-Sprachfunktionen

Werkzeugvorbereitung

Wir müssen vue-cli verwenden, um ein Gerüstprojekt zu erstellen.

vue-cli installieren

$ npm install -g vue-cli

Knotenversion bestätigen

Meine Version ist

$ node -v

v5

$ npm -v

3.10.6

Wenn viele Probleme auftreten, können diese mit der Version zusammenhängen. Die Vorschläge sind dieselben wie meins.

Neues Projekt erstellen

Ausführung:

$ vue init webpack my-project

Der zweite Parameter Webpack gibt an, ein VueJS-Projekt basierend auf der Vorlage „Webpack“ zu erstellen. Diese Vorlage erstellt einen Webpack-Gerüstcode.

Aber was ist Webpack? Es selbst ist ein Verpackungstool, das JS, CSS und Bilder in eine oder mehrere JS-Dateien packen und verschiedene Loader als Plug-Ins zum Konvertieren verschiedener Dateitypen unterstützen kann. Tatsächlich verwendet Webpack den Plug-in Vue-Loader, um beim Laden von Vue-Typ-Dateien eine Formatkonvertierung durchzuführen, und übersetzt Vue-Typ-Dateien in JS-Dateien, die der Browser erkennen kann.

Achtung für chinesische Benutzer: Der Befehl vue init verwendet npm. Das npm-Warehouse ist oft langsam oder blockiert. Sie können einfach ~/.npmrc verwenden und den folgenden Inhalt hinzufügen >

Das geht viel schneller.

registry = https://registry.npm.taobao.org

Die derzeit verfügbaren Vorlagen sind:

Webpack – Über Webpack- und Vue-Loader-Plug-Ins kann babel aufgerufen werden, um die .vue-Datei in eine JS-Datei zu kompilieren, die von erkannt werden kann Kunde. Hot Loading, Code-Inspektion und Tests können ebenfalls standardmäßig bereitgestellt werden.

webpack-simple – Das einfachste Webpack- und Vue-Loader-Plug-in.

browserify – Durch die Kombination von Browserify + vueify kann babel aufgerufen werden, um die .vue-Datei in eine js-Datei zu kompilieren, die der Client erkennen kann. Hot Loading, Code-Inspektion und Tests können ebenfalls standardmäßig bereitgestellt werden.

browserify-simple – Das einfachste Browserify + vueify-Plug-in.

Theoretisch haben Webpack und Browserify ähnliche Funktionen und beide können als Verpackungstools verwendet werden. Aber Webpack ist ein beliebtes Tool, für das es nur sehr wenig Dokumentation gibt, das aber von allen genutzt werden möchte. Machen wir uns also keine Sorgen und verwenden Sie zuerst Webpack.

Abhängigkeiten installieren, gehen Sie einfach zu

$ cd my-project
$ npm install
$ npm run dev

Gehen Sie zu http://localhost:8080, um den Effekt anzuzeigen.

Vue-Dateien anzeigen

Vue-Dateien sind eine Dreifaltigkeit. Das heißt, CSS, HTML und JS befinden sich alle in einer Datei und werden durch Tags getrennt. Um die Struktur besser erkennen zu können, empfiehlt es sich, zunächst das zum Editor entsprechende Highlight-Plugin zu installieren.

Syntaxhervorhebung installieren

Der Editor, den ich gewohnt bin, ist Sublime Text. Durch die Installation des Plug-Ins können alle VueJS-Komponentencodes mit der Erweiterung .vue identifiziert und hervorgehoben werden, um das Lesen des Codes zu erleichtern und schreiben. Dieses Plug-in heißt vue-syntax-highlight und wird offiziell von vuejs bereitgestellt. Es befindet sich unter github.com. Klonen Sie es einfach in Ihr Sublime-Paketverzeichnis. Auf meinem Computer ist das Sublime-Paketverzeichnis /Users/lcj/Library/Application Support/Sublime Text 3/Packages, daher ist der Installationsprozess

cd /Users/lcj/Library/Application\ Support/Sublime\ Text\ 3/Packages
git clone https://github.com/vuejs/vue-syntax-highlight

und kann dann neu gestartet werden . Nach dem Lesen des Codes werden alle Dateien mit der Erweiterung .vue entsprechend hervorgehoben.

Vue anzeigen

Der Startcode enthält einen Komponentencode, der sich in src/hello.vue befindet. Ansicht:

Die Datei ist in drei Teile unterteilt. Das