Heim  >  Artikel  >  Web-Frontend  >  So erstellen Sie eine vue.js-Entwicklungsumgebung

So erstellen Sie eine vue.js-Entwicklungsumgebung

清浅
清浅Original
2019-05-05 16:04:156056Durchsuche

Erstellen der vue.js-Entwicklungsumgebung: Installieren Sie zuerst [vue.js], dann installieren Sie den npm-Paketmanager, die Module, das Webpack und das Vue-Gerüst. Beginnen Sie schließlich mit der Initialisierung der Vue-Umgebung und installieren Sie die Projektabhängigkeiten zu Vue hier Die Entwicklungsumgebung ist eingerichtet.

So erstellen Sie eine vue.js-Entwicklungsumgebung

[Empfohlenes Tutorial: Vue.js-Tutorial]

Umgebungsvorbereitung

Node.js Javascript-Laufzeitumgebung

npm-Paketverwaltungstool unter Node.js

Webpack-Front- Modulares Verwaltungs- und Verpackungstool für Endressourcen

vue-cli-Gerüstkonstruktionstool

cnpm npm Taobao-Spiegel

Vue.js-Installation

1. Die Installation von Node.js ist sehr einfach. Laden Sie zunächst die benötigte Version des Betriebssystems von der offiziellen Website herunter und fahren Sie dann mit dem nächsten Schritt fort.
Nach Abschluss der Installation geben Sie node -v in die Befehlszeile ein. Wenn die entsprechende Versionsnummer angezeigt wird, ist die Installation erfolgreich.

So erstellen Sie eine vue.js-Entwicklungsumgebung

2. npm ist ein Paketverwaltungstool, das zusammen mit Node.js installiert wird. Sie können überprüfen, ob die Installation erfolgreich ist, indem Sie npm -v direkt in die Befehlszeile eingeben.

So erstellen Sie eine vue.js-Entwicklungsumgebung

Obwohl der NPM-Paketmanager verfügbar ist, befindet sich die Serveradresse des Pakets, von dem der NPM-Download abhängig sein muss, im Ausland, was dazu führt, dass der Zugriff auf viele Ressourcen sehr langsam ist. So können wir Taobaos Haushaltsspiegel installieren.
3. Geben Sie npm install -g cnpm --registry=http://registry.npm.taobao.org in die Befehlszeile ein.
Auf diese Weise können Sie den Befehl cnpm verwenden, um das Modul zu installieren:

cnpm install [name]

4. Installieren Sie das Webpack

cnpm install webpack -g

5. Installieren Sie vue scaffolding

Initialisieren Sie eine Vue .js-Umgebung

Erstellen Sie einen neuen Ordner auf Ihrem Computer, um unseren Code zu speichern. Geben Sie dann über die Befehlszeile den CD-Verzeichnispfad dieses Ordners ein. Verwenden Sie nach

den Befehl

npm install vue-cli -g
, um eine Vue-Umgebung zu initialisieren. Dieser Befehl bedeutet, ein Projekt zu initialisieren, wobei Webpack das Build-Tool ist, das heißt, das gesamte Projekt basiert auf Webpack. Während des Installationsvorgangs werden einige Initialisierungseinstellungen vorgenommen. Wir können die Standardkonfiguration verwenden und die Eingabetaste drücken.

So erstellen Sie eine vue.js-Entwicklungsumgebung

Auf dem Bild oben können wir auch sehen, dass Vue uns sehr nachdenklich den Befehl zum Schnellstart (Um zu beginnen) mitgeteilt hat

Installation Projektabhängigkeiten

müssen aus dem offiziellen Repository installiert werden. Der npm-Server befindet sich im Ausland, daher ist die Installationsgeschwindigkeit dieses Schritts sehr langsam.

vue init webpack name
Nicht vom inländischen Spiegel cnpm installieren (da sonst viele abhängige Bibliotheken fehlen)

npm install

Installieren Sie das Vue-Routing-Modul vue-router und das Netzwerkanforderungsmodul vue-resource

cnpm install

Starten Sie das Projekt

cnpm install vue-router vue-resource --save

Nach erfolgreicher Ausführung wird er Ihnen die IP- und Portnummer mitteilen

So erstellen Sie eine vue.js-Entwicklungsumgebung

Besuchen Sie diese Adresse

So erstellen Sie eine vue.js-Entwicklungsumgebung

Wenn das obige Bild erscheint. Herzlichen Glückwunsch, Sie sind bereit, Ihre Vue.js-Reise zu beginnen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine vue.js-Entwicklungsumgebung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

In Verbindung stehende Artikel

Mehr sehen