So führen Sie Projekte in vue.js aus

So führen Sie das Projekt aus: 1. Installieren Sie node und cnpm; 2. Installieren Sie vue-cli; 4. Rufen Sie den Projektordner mit dem Befehl „cnpm install“ auf 5. Verwenden Sie die Zeile „npm run dev“, um das Projekt auszuführen.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Version vue2.9, diese Methode ist für alle Computermarken geeignet.

Verwandte Empfehlungen: „vue.js Tutorial“

Viele Leute, die gerade erst mit vue.js angefangen haben, greifen zunächst zu den Open-Source-Projekten auf GitHub, stellen aber fest, dass sie nicht wissen, wie man Open Source ausführt Projekte auf GitHub, was sehr peinlich ist. Durch die Konsultation von Online-Tutorials habe ich die Projektumgebung erfolgreich aufgebaut und ein vages Verständnis des Front-End-Engineerings erlangt, sodass ich den Umgebungserstellungsprozess mit allen teilen werde.

Listen Sie zunächst auf, was wir benötigen:

• node.js-Umgebung (npm-Paketmanager)

• vue-cli-Gerüstkonstruktionstool

• cnpm npm Taobao-Spiegel

Node installieren. .j s

Laden Sie Node von der offiziellen Website von node.js herunter und installieren Sie es. Der Installationsprozess ist sehr einfach, nur der „nächste Schritt“ (dumme Installation).
Öffnen Sie nach Abschluss der Installation das Befehlszeilentool und geben Sie node -v ein, wie unten gezeigt. Wenn die entsprechende Versionsnummer angezeigt wird, ist die Installation erfolgreich.

Der npm-Paketmanager ist in den Knoten integriert. Wenn Sie also direkt npm -v eingeben, werden die npm-Versionsinformationen wie unten gezeigt angezeigt.

OK! Die Knotenumgebung wurde installiert und der npm-Paketmanager ist ebenfalls verfügbar. Da einige npm-Ressourcen blockiert sind oder fremde Ressourcen sind, schlägt die Installation von Abhängigkeitspaketen mit npm häufig fehl. Daher benötige ich auch den inländischen Spiegel von npm – cnpm.

Installieren Sie cnpm

Geben Sie

npm install -g cnpm --registry=http://registry.npm.taobao.org

in die Befehlszeile ein und warten Sie. Die Installation ist wie unten gezeigt abgeschlossen.

Nach Abschluss können wir cnpm anstelle von npm verwenden, um Abhängigkeitspakete zu installieren. Wenn Sie mehr über cnpm erfahren möchten, besuchen Sie die offizielle Website des Taobao npm Mirror.

Installieren Sie das vue-cli-Scaffolding-Build-Tool.

Führen Sie den Befehl

cnpm install -g vue-cli

in der Befehlszeile aus und warten Sie, bis die Installation abgeschlossen ist. (Beachten Sie, dass hier cnpm anstelle von npm verwendet wird, da sonst die Geschwindigkeit sehr langsam ist und stecken bleibt.)

Durch die oben genannten drei Schritte sind die Umgebung und die Tools, die wir vorbereiten müssen, bereit, und dann beginnen wir mit der Verwendung von Vue -cli, um ein Projekt zu erstellen.

Erstellen Sie das Projekt mit vue-cli

Um das Projekt zu erstellen, müssen wir zuerst das Verzeichnis auswählen und dann das Verzeichnis in das ausgewählte Verzeichnis in der Befehlszeile ändern. Hier wähle ich den Desktop zum Speichern des neuen Projekts aus, dann müssen wir zuerst das Verzeichnis auf den Desktop kopieren, wie unten gezeigt.

Führen Sie im Desktop-Verzeichnis den Befehl in der Befehlszeile aus Webpack. Unter diesen ist firstVue der Name des gesamten Projektordners. Dieser Ordner wird automatisch in dem von Ihnen angegebenen Verzeichnis generiert (in meinem Beispiel wird der Ordner auf dem Desktop generiert), wie unten gezeigt.

Beim Ausführen des Initialisierungsbefehls wird der Benutzer aufgefordert, mehrere grundlegende Optionen einzugeben, z. B. Projektname, Beschreibung, Autor und andere Informationen. Wenn Sie die Felder nicht ausfüllen möchten, drücken Sie einfach Geben Sie die Standardeinstellungen ein.

Öffnen Sie den ersten Vue-Ordner. Die Projektdatei lautet wie folgt.

Dies ist die Verzeichnisstruktur des gesamten Projekts, wobei wir hauptsächlich Änderungen im src-Verzeichnis vornehmen. Dieses Projekt ist immer noch nur ein struktureller Rahmen und die für das gesamte Projekt erforderlichen abhängigen Ressourcen wurden noch nicht installiert, wie unten gezeigt.

Installieren Sie die für das Projekt erforderlichen Abhängigkeiten

Um das Abhängigkeitspaket zu installieren, wechseln Sie zunächst mit cd zum Projektordner (Ordner „firstVue“) und führen Sie dann den Befehl aus:

vue init webpack firstVue

Warten Sie auf die Installation.

安装完成之后，会在我们的项目目录firstVue文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

安装完依赖包之后，就可以运行整个项目了。

运行项目

在项目目录中，运行命令，

 npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，说明项目运行成功了。

相关推荐：

2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程教学！！

Das obige ist der detaillierte Inhalt vonSo führen Sie Projekte in vue.js aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!