Vue3 Projekt erstellen

Im vorherigen KapitelVue3-Installationhaben wir den Befehlnpm initverwendet, um ein Projekt zu erstellen. Dieses Kapitel stellt hauptsächlichnpm create vorden Befehl zum Erstellen von Projekten sowie die Verwendung desvue uiBefehls zum Öffnen der grafischen Installationsoberfläche.

Die empfohlene IDE-Konfiguration für die Vue-Entwicklung istVisual Studio Code + Vue - Official-Erweiterung：

Andere IDEs werden wie folgt unterstützt:

npm create-Befehl

Verwenden Sie den Befehl npm create, um ein Vue-Projekt zu erstellen, normalerweise über Vite (das offiziell von Vue empfohlene Build-Tool), um eine Vue-Anwendung zu erstellen.

In Vite wird npm create verwendet, um Scaffolding-Tools (wie vite@latest) auszuführen, um schnell eine neue Projektvorlage zu generieren.

Weitere Details zu Vite finden Sie unter:Vite-Tutorial。

npm createDie Syntax zum Erstellen eines Projekts mit dem Befehl lautet wie folgt:

npm create vite@latest <project-name> --template vue

Erklärung:

  • npm create: Der Befehl zum Ausführen einer Projektvorlage. Er erstellt ein neues Projekt und initialisiert es aus der angegebenen Vorlage.

  • vite@latest: vite ist das Tool zum Erstellen von Vue 3-Projekten,@latestgibt die Verwendung der neuesten Version von Vite an und stellt sicher, dass das von Ihnen erstellte Projekt auf der neuesten Version von Vite basiert. Ohne@latest，npmwird versucht, die aktuell installierte Version zu verwenden.

  • <project-name>: Der Ordnername des neu erstellten Projekts. Der Befehl erstellt einen Ordner und legt den Vorlagencode darin ab. Wenn Sie beispielsweisenpm create vite@latest my-vue-app --template vueerstellt einen Ordner mit dem Namenmy-vue-appim aktuellen Verzeichnis und platziere die Vue-Projektvorlagendateien darin.

  • --template vue：--template vueGibt den zu verwendenden Vorlagentyp an. Vite unterstützt mehrere Vorlagen,vueist die speziell für Vue 3 bereitgestellte Vorlage. Es gibt auch andere Vorlagen, wie z. B.vanilla、react、svelteusw.

Als Nächstes erstellen wir das Projekt example-vue3-app:

npm create vite@latest

Wenn Sie den obigen Befehl ausführen, werden Sie zunächst aufgefordert, einen Projektnamen einzugeben und ein Framework auszuwählen:

> Project name: … example-vue3-app
? Select a framework: › - Use arrow-keys. Return to submit.
❯   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others

Vite unterstützt mehrere Vorlagen. Häufig verwendete sind unter anderem:

  • vue: Vue-3-Projekt (verwendet standardmäßig Vue 3)
  • vanilla: Basisvorlage ohne Framework
  • react: React-Projekt
  • svelte: Svelte-Projekt
  • preact: Preact-Projekt
  • Sie können auch andere Vorlagen basierend auf Ihren spezifischen Anforderungen auswählen.

Sie können mit den Pfeiltasten auswählen. Wir wählen Vue aus, dann erscheint ein Bildschirm zur Variantenauswahl, und wir können JavaScript auswählen, um schnell zu starten:

> Project name: … example-vue3-app
> Select a framework: › Vue
> Select a variant: › JavaScript

Scaffolding project in /Users/example/example-test/example-vue3-app...

Done. Now run:

  cd example-vue3-app
  npm install
  npm run dev

Nach Abschluss der Installation wechseln wir in das Projektverzeichnis:

cd example-vue3-app

Die gesamte Verzeichnisstruktur ist in der folgenden Abbildung dargestellt:

Installieren Sie die Abhängigkeiten und starten Sie die Anwendung:

npm install
npm run dev

Öffnen Sie dannhttp://localhost:5173/, und Sie sehen die Anwendungsoberfläche:

Darüber hinaus können wir in der Dateivite.config.jsunseren eigenen Port festlegen. Zum Beispiel setzt das Folgende den Port auf 3000:

Beispiel

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],

  server: {
    port: 3000, // Benutzerdefinierte Portnummer
  },
})

vue ui-Befehl

Neben der Verwendung des Befehlsvue createzum Erstellen von Projekten können wir auch das visuelle Erstellungswerkzeug verwenden, um Projekte zu erstellen.

Führen Sie den Befehl aus:

$ vue ui
->  Starting GUI...
->  Ready on http://localhost:8000
...

Durch Ausführen des obigen Befehls öffnet sich im Browser eine Projektverwaltungsoberfläche:

Wir können auf die"Erstellen"Option klicken, um ein Projekt zu erstellen. Wählen Sie unten "Projekt hier erstellen" aus. Sie können auch oben auf der Seite einen Pfad auswählen:

Geben Sie dann unseren Projektnamen ein, wählen Sie npm als Paketmanager aus und klicken Sie auf Weiter:

Wählen Sie einfach die Standardkonfiguration:

Warten Sie als Nächstes, bis die Installation abgeschlossen ist. Nach der Installation sieht die Verwaltungsoberfläche wie folgt aus:

Andere Erweiterungen