Installation und Konfiguration von vue.js

Beim Front-End-Lernen entscheiden wir uns nach dem Erlernen von HTML, CSS und JS normalerweise für das Erlernen einiger Frameworks wie Jquery, AngularJs usw. Diese Reihe von Blogbeiträgen richtet sich an Studierende, die Vue.js erlernen.

1. So verwenden Sie Vue.js einfach

Genau wie die Jquery, die wir zuvor gelernt haben, können wir auch direkte Referenzen verwenden, wenn wir Vue.js in der Programmmethode verwenden , laden Sie es direkt herunter und führen Sie es mit dem Tag ein. Vue.js wird als globale Variable registriert. Hier ist ein wichtiger Tipp: Auf der offiziellen Website von Vue.js gibt es zwei Versionen, die Entwicklungsversion und die Produktionsversion. Wir verwenden während der Entwicklung die Entwicklungsversion und geben bei häufigen Fehlern entsprechende Warnungen aus.

Natürlich kann Vue.js wie Jquery auch über CDN im Code referenziert werden. Kopieren Sie einfach den Code und fügen Sie ihn direkt auf der bootcdn-Website ein. Das ist einfach und bequem.

2.vue-Umgebungskonstruktion

Wir empfehlen die Verwendung der NPM-Installation beim Erstellen umfangreicher Anwendungen mit Vue.js, die gut mit Modulen wie Webpack oder verpackt werden können Browserify wird in Verbindung mit dem Gerät verwendet. Vue.js bietet außerdem unterstützende Tools zum Entwickeln einzelner Dateikomponenten.

Die empfohlene Entwicklungsumgebung für Vue.js ist Nodejs. npm: ist der Paketmanager unter Nodejs. Da die Verwendung von npm in China sehr langsam sein wird, wird empfohlen, den Taobao NPM-Spiegel zu verwenden (seine URL lautet http://npm.taobao.org/). Wir verwenden Webpack zum Zusammenführen und Paketieren von Ressourcen und Vue-CLI zum Generieren benutzergenerierter Vue-Projektvorlagen.

Konzentrieren wir uns also darauf, wie man eine geeignete Umgebung schafft.

(1) So installieren Sie Nodejs

Öffnen Sie die offizielle Website von Nodejs (https://nodejs.org/en/), wir können den Download im sehen Mitte der Seite Wählen Sie für dieses Wort einfach die entsprechende Version zum Herunterladen aus. Es wird empfohlen, die spätere Version herunterzuladen. Sie können auch unten „Andere Downloads“ auswählen, um andere Versionen und Mac-Versionen herunterzuladen.

Nachdem der Download abgeschlossen ist, verwenden Sie einfach die kinderleichte Installation. Nach Abschluss der Installation können Sie zunächst einfach testen, ob die Installation erfolgreich ist, und dann die Umgebung konfigurieren. Drücken Sie die Tasten [win+R] auf der Tastatur, geben Sie cmd ein und drücken Sie dann die Eingabetaste, um das cmd-Fenster zu öffnen. Geben Sie node -v und npm -v ein, um die aktuell installierte Versionsnummer anzuzeigen, was bedeutet, dass die Installation erfolgreich ist. Die neue Version von Node.js verfügt über ein eigenes npm. Die Funktion von npm besteht darin, die Pakete zu verwalten, von denen Node.js abhängt. Es kann auch als die Dinge verstanden werden, die von Node.js installiert und deinstalliert werden müssen.

(2) cnpm installieren

Da einige npm-Ressourcen blockiert sind oder fremde Ressourcen sind, kommt es häufig zu einem Fehler, wenn npm zum Installieren abhängiger Pakete verwendet wird , also entweder FQ oder den inländischen Spiegel cnpm verwenden. Öffnen Sie https://npm.taobao.org/. Wir können erfahren, dass es sich um einen vollständigen npmjs.org-Spiegel handelt, der anstelle der offiziellen Version (schreibgeschützt) verwendet werden kann. Die Synchronisierungsfrequenz beträgt derzeit alle 10 Minuten Stellen Sie sicher, dass es so weit wie möglich mit dem offiziellen Dienst synchronisiert ist.

Geben Sie außerdem npm install -g cnpm --registry=http://registry.npm.taobao.org in die Befehlszeile ein und warten Sie.

Nachdem die Installation abgeschlossen ist, geben wir zur Überprüfung cnpm -v ein. Wenn das folgende Bild angezeigt wird, ist die Installation erfolgreich.

(3) Installieren Sie vue-cli

vue-cli ist Ein globales Gerüst wird verwendet, um das erforderliche Vorlagen-Framework zu erstellen. Geben Sie auf ähnliche Weise den Befehl in cmd ein: npm install -g vue-cli. In diesem Codeteil bedeutet -g die globale Verwendung. Wie bei cnpm wird nach Abschluss der Installation eine lange Liste von Dateien angezeigt. Geben Sie vue -v ein, um die Vue-Version anzuzeigen. Zu diesem Zeitpunkt wurde die Umgebung grundsätzlich erfolgreich eingerichtet.

(4) Testen Sie, erstellen Sie das erste Vue.js-Projekt

Geben Sie in die Befehlszeile ein: vue init webpack my-first-demo (Name des Projektordners).

Die Einstellungen hier und später können eingegeben werden, oder Sie können direkt Enter und N drücken.

Auf diese Weise entsteht das erste Vue.js-Projekt. Öffnen Sie die entsprechende Speicheradresse und Sie werden sehen, dass meine Datei unter Benutzer/Lunlun/ abgelegt ist.

Durch Eingabe von cd my-first-demo können Sie den verzeichnisspezifischen Ordner aufrufen und in der Befehlszeile Folgendes eingeben: cnmp install oder npm install, um das Abhängigkeitspaket zu installieren. Öffnen Sie den Ordner unter dem Pfad erneut. Wir können sehen, dass sich im Ordner ein weiterer node_modules-Ordner befindet. Die Gerüstinstallation ist nun abgeschlossen.

(5) Geben Sie in der Befehlszeile Folgendes ein: npm run dev.

Dieser Befehl führt unsere Anwendung per Hot-Loading aus. Hot-Loading ermöglicht es uns, den geänderten Effekt in Echtzeit zu sehen, ohne den Browser nach der Änderung des Codes manuell zu aktualisieren.

Hier ist eine kurze Einführung in den Befehl npm run dev. „run“ entspricht dem dev im Feld „scripts“ in der Datei package.json, das eine Verknüpfung zum Knoten build/dev-server darstellt. js-Befehl. Nachdem das Projekt erfolgreich ausgeführt wurde, öffnet der Browser automatisch localhost:8080 (wenn der Browser nicht automatisch geöffnet wird, können Sie ihn manuell eingeben). Nach erfolgreicher Ausführung sehen Sie die unten gezeigte Oberfläche. An diesem Punkt ist die Aufgabe abgeschlossen.

In diesem Artikel wird die Installation und Konfiguration von vue.js vorgestellt. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

JS implementiert Browserdruck und Druckvorschau

JS-Callback-Funktionsinstanz

JS-Vererbungsimplementierung