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