Installieren von Vue.js unter Windows-Subsystem für Linux

  • Artikel

Eine Anleitung, die Sie beim Einrichten einer Vue.js-Entwicklungsumgebung unter Windows unterstützt, indem Sie das Vue.js-Webframework unter Windows-Subsystem für Linux (WSL) installieren. Weitere Informationen finden Sie auf der Seite Übersicht über Vue.js.

Vue kann direkt unter Windows oder unter WSL installiert werden. Im Allgemeinen wird die Installation unter WSL empfohlen, wenn Sie die Interaktion mit einem NodeJS-Back-End planen, eine Parität mit einem Linux-Produktionsserver wünschen oder ein Tutorial mit Bash-Befehlen befolgen möchten. Möglicherweise ziehen Sie Vite als Alternative zu Vue.js in Betracht.

Voraussetzungen

  • Installieren Sie Windows-Subsystem für Linux (WSL), einschließlich einer Linux-Distribution (wie Ubuntu), und stellen Sie sicher, dass sie im WSL 2-Modus ausgeführt wird. Sie können dies überprüfen, indem Sie PowerShell öffnen und Folgendes eingeben: wsl -l -v.
  • Installieren Sie Node.js unter WSL 2: Dies umfasst einen Versions-Manager, einen Paket-Manager, Visual Studio Code und die Remoteentwicklungserweiterung. Der Node-Paket-Manager (NPM) wird zum Installieren von Vue.js verwendet.

Wichtig

Wenn Sie eine Linux-Distribution mit WSL installieren, wird ein Verzeichnis zum Speichern von Dateien erstellt: \\wsl\Ubuntu-20.04 (Ersetzen Sie Ubuntu-20.04 durch die Linux-Distribution, die Sie verwenden). Um dieses Verzeichnis im Windows-Datei-Explorer zu öffnen, öffnen Sie die WSL-Befehlszeile, wählen Sie Ihr Basisverzeichnis mit cd ~ aus, und geben Sie dann den Befehl explorer.exe . ein. Achten Sie darauf, keine Installationen vorzunehmen und keine Dateien zu speichern, mit denen Sie auf dem eingebundenen Laufwerk C arbeiten werden (/mnt/c/Users/yourname$). Dadurch werden die Installations- und Buildzeiten erheblich verlangsamt.

Installieren von Vue.js

So installieren Sie Vue.js unter WSL:

  1. Öffnen Sie eine WSL-Befehlszeile (d. h. Ubuntu).

  2. Erstellen Sie mit mkdir VueProjects einen neuen Projektordner, und wechseln Sie mit cd VueProjects in das Verzeichnis.

  3. Installieren Sie Vue.js mithilfe des Node-Paket-Managers (NPM):

npm install vue

Überprüfen Sie die Versionsnummer, die Sie installiert haben, mithilfe des Befehls vue --version.

Hinweis

Informationen zum Installieren von Vue.js mithilfe eines CDN anstelle eines NPM finden Sie in der Vue.js-Dokumentation.

Installieren der Vue CLI

Die Vue CLI ist ein Toolkit für die Arbeit mit Vue in Ihrem Terminal/in der Befehlszeile. So können Sie schnell ein neues Projekt erstellen (vue create), neue Ideen entwickeln (vue serve) oder Projekte mithilfe einer grafischen Benutzeroberfläche (vue ui) verwalten. Die Vue CLI ist ein global installiertes NPM-Paket, das einige der Buildkomplexitäten (z. B. die Verwendung von Babel oder Webpack) für Sie verarbeitet. Wenn Sie keine neue Single-Page-App erstellen, benötigen oder möchten Sie möglicherweise keine Vue CLI.

Verwenden Sie den NPM, um die Vue CLI zu installieren. Sie müssen das -g-Kennzeichen verwenden, um global zu installieren, um ein Upgrade durchzuführen (vue upgrade --next):

npm install -g @vue/cli

Weitere Informationen zu zusätzlichen Plug-Ins, die hinzugefügt werden können (z. B. Linting oder Apollo für die Integration von GraphQL), finden Sie unter Vue CLI-Plug-Ins in der Vue CLI-Dokumentation.

Zusätzliche Ressourcen