Führen Sie NPM aus. Erstellen Sie vite@neueste, setzen Sie den Projektnamen fest, w?hlen Sie Vue als Framework und Variante. 2. Navigieren Sie mit CD My-vue-App in das Projektverzeichnis, installieren Sie Abh?ngigkeiten über NPM-Installation und starten Sie den Dev-Server mit NPM Run Dev, um auf die App unter http: // localhost: 5177 zuzugreifen. 3. Die Projektstruktur enth?lt SRC/ für Quelldateien index.html als Einstiegspunkt Vite.config.js für die Konfiguration, mit Main.js als Einstiegspunkt und App.vue als Stammkomponente. 4. Erstellen Sie für die Produktion mit dem NPM -Ausführen von Build, um optimierte Dateien in DIST/zu generieren, und testen Sie den Build lokal mit NPM -Auslaufvorschau. Sie haben jetzt ein voll funktionsf?higes Vue -Projekt mit Vite, ideal für die Entwicklung und Bereitstellung.

Das Erstellen eines Vue -Projekts mit Vite ist schnell, einfach und bietet Ihnen eine moderne Entwicklungserfahrung. VITE bietet nahezu instantierte Startup- und Hei?modul-Ersatz (HMR), was es zu einer guten Wahl für VUE-Apps macht. Hier erfahren Sie, wie Sie es einrichten:

1. Verwenden Sie den Befehl create vite create

Am einfachsten besteht die Verwendung create-vite , einem Gerüst-Tool, das ein neues Projekt mit Ihrem ausgew?hlten Framework und Ihrer Variante einstellt.

Führen Sie diesen Befehl in Ihrem Terminal aus:

 npm erstellen vite@lunster

Sie werden aufgefordert, ein paar Fragen zu beantworten:

• Projektname : Geben Sie den Namen Ihres Projekts ein (z. B. my-vue-app )
• Framework : W?hlen Sie Vue aus
• Variante : W?hlen Sie Vue (für einfache Vue) oder Vue TypeScript wenn Sie die TypeScript -Unterstützung wünschen

Beispiel:

 Projektname: my-vue-App
W?hlen Sie ein Framework: Vue
W?hlen Sie eine Variante: Vue

2. Installieren Sie Abh?ngigkeiten und starten Sie Dev Server

Sobald das Projekt erstellt wurde, navigieren Sie in das Verzeichnis und installieren Sie Abh?ngigkeiten:

 CD my-vue-App
NPM Installation

Starten Sie dann den Entwicklungsserver:

 NPM Run Dev

Sie werden die Ausgabe sehen wie:

 Vite v4.3.9 bereit in 123 ms

  ? Lokal: http: // localhost: 5173/

?ffnen Sie die URL in Ihrem Browser, um die Standardseite der Standard -Vue -Begrü?ung anzuzeigen.

3. übersicht der Projektstruktur

Ihr Projektordner sieht so aus:

 my-vue-App/
├── src/
│ ├── Verm?gen/
│ ├── Komponenten/
│ ├── app.vue
│ └── main.js
├── ?ffentlich/
├── Index.html
├── vite.config.js
├── package.json
└── ...

• src/main.js ist der Einstiegspunkt.
• App.vue ist die Stammkomponente.
• vite.config.js k?nnen Sie VITE -Einstellungen anpassen.

4. Build for Production

Wenn Sie bereit sind, bereitzustellen, erstellen Sie das Projekt:

 NPM Run Build

Dies erzeugt optimierte statische Dateien im dist/ Ordner.

Um den Produktionsbau lokal zu testen:

 NPM -Auslaufvorschau

Dies dient dem dist/ Ordner, sodass Sie überprüfen k?nnen, wie er im Produktionsmodus ausgeführt wird.

Das war's! Sie haben jetzt ein voll funktionsf?higes Vue -Projekt, das von VITE betrieben wird. Es ist schnell, sich einzurichten und perfekt für das Lernen oder Starten einer neuen App. Grunds?tzlich nur ein paar Befehle und Sie sind bereit zu codieren.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Vue -Projekt mit VITE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!