Lernprogramm: Vue.js für Anfänger

Wenn Sie ganz neu in der Verwendung von Vue.jssind, hilft Ihnen dieser Leitfaden, sich mit den Grundlagen vertraut zu machen.

• Probieren Sie den Vue.js HelloWorld-Code-Sandbox
• Nutzen Sie Node.js in Visual Studio Code

Voraussetzungen

• Sie müssen zuerst Vue.js auf Windows oder auf dem Windows-Subsystem für Linuxinstallieren.

Testen von NodeJS mit Visual Studio Code

Wenn es noch nicht installiert ist, VS Codeinstallieren. Es wird empfohlen, VS Code unter Windows zu installieren, unabhängig davon, ob Sie Vue unter Windows oder WSL verwenden möchten.

1. Öffnen Sie die Befehlszeile und erstellen Sie ein neues Verzeichnis: mkdir HelloVue, und wechseln Sie dann in das Verzeichnis: cd HelloVue

2. Installieren Sie die Vue CLI: npm install -g @vue/cli

3. Erstellen Sie Ihre Vue-App: vue create hello-vue-app

   Sie müssen auswählen, ob Vue 2 oder Vue 3 Preview verwendet werden soll, oder wählen Sie die gewünschten Features manuell aus.

   

4. Öffnen Sie das Verzeichnis Ihrer neuen hello-vue-app: cd hello-vue-app

5. Versuchen Sie, die neue Vue-App in Ihrem Webbrowser auszuführen: npm run serve

   Sie sollten "Willkommen bei Ihrer Vue.js-App" auf http://localhost:8080 in Ihrem Browser sehen. Sie können Ctrl+C drücken, um den vue-cli-service-Server zu beenden.

   Hinweis

   Wenn Sie WSL (mit Ubuntu oder Ihrer bevorzugten Linux-Distribution) für dieses Tutorial verwenden, müssen Sie sicherstellen, dass Sie die Remote - WSL-Erweiterung installiert haben, um Ihren Code mit dem VS-Remote-Server optimal auszuführen und zu bearbeiten.

6. Versuchen Sie, die Willkommensnachricht zu aktualisieren, indem Sie den Quellcode Ihrer Vue-App in VS Code öffnen, folgendes eingeben: code .

7. VS Code startet und zeigt Ihre Vue-Anwendung im Datei-Explorer an. Führen Sie Ihre App erneut im Terminal mit npm run serve aus, und sorgen Sie dafür, dass Ihr Webbrowser auf localhost geöffnet bleibt, damit die Willkommensseite von Vue angezeigt wird. Suchen Sie die App.vue Datei in VS Code. Versuchen Sie, "Willkommen in Ihrer Vue.js App" auf "Willkommen im Dschungel!" zu ändern. Sie werden sehen, wie Ihre Vue-App ein "hot reload" durchführt, sobald Sie Ihre Änderung speichern.

   

Weitere Ressourcen

• Verwenden von Vue in Visual Studio Code: Erfahren Sie mehr über die Verwendung von Vue mit VS Code, einschließlich der Vetur-Erweiterung, die Syntax-Hervorhebung, IntelliSense, Debugging-Unterstützung und vieles mehr für Vue bietet.

• Vue.js Dokumente

• Vue im Vergleich zu anderen Frameworks wie React oder Angular

• Vue.js Übersicht

• Erste Schritte mit dem Vue.js Lernpfad machen