Detaillierte Schritte zum Erstellen eines Vue-Scaffolding-Projekts

Detaillierte Schritte zum Erstellen eines Vue-Scaffolding-Projekts

Vue-Gerüst -> vue.cli

Erstellen Sie schnell eine große, voll funktionsfähige Vue-Projektvorlage (Initialisiererprojekt).

Einfache Erklärung: Schnell ein leeres Vue-Projekt erstellen

Installation (globale Installation)

  • Globale Installation
> npm i @vue/cli -g
  • Erstellen Sie ein Vue-Scaffolding-Projekt
> vue erstellt Projektnamen

Konfigurationsoptionen

Vue CLI v4.5.11
? Bitte wählen Sie eine Voreinstellung: (Verwenden Sie die Pfeiltasten)
> Standard ([Vue 2] babel, eslint) 
 Standard (Vue 3 Vorschau) ([Vue 3] babel, eslint) 
 Manuelles Auswählen von Features
  • Drücken Sie zum Auswählen die Auf- und Ab-Taste und zum Bestätigen die Eingabetaste. Wählen Sie hier die dritte Option „Manuell“ aus.

Features auswählen

Vue CLI v4.5.11
? Bitte wählen Sie eine Voreinstellung: Funktionen manuell auswählen
? Überprüfen Sie die für Ihr Projekt benötigten Funktionen: (Drücken Sie <Leertaste> zum Auswählen, <a> zum Umschalten auf alle, <i> zum Umkehren der Auswahl)
>(*) Vue-Version auswählen
 (*) Babel
 () TypoScript
 ( ) Progressive Web App (PWA) Unterstützung
 ( ) Router
 ( ) Vuex
 ( ) CSS-Präprozessoren
 (*) Linter / Formatierer
 ( ) Komponententests
 ( ) E2E-Tests
  • Bewegen Sie den Cursor nach oben und unten, drücken Sie die Leertaste zum Auswählen, drücken Sie die Eingabetaste zum Bestätigen, wählen Sie hier Option 1 2 5 6

Ausführung auswählen

? Überprüfen Sie die für Ihr Projekt erforderlichen Funktionen: Wählen Sie die Vue-Version, Babel, Router, Vuex
Wählen Sie eine Version von Vue.js, mit der Sie das Projekt starten möchten (verwenden Sie die Pfeiltasten).
> 2.x
 3.x (Vorschau)
  • Wählen Sie hier 2.x

Ob der Verlaufsmodus verwendet werden soll

? Verlaufsmodus für Router verwenden? (Erfordert ordnungsgemäße Servereinrichtung für Index-Fallback in der Produktion) (J/n)
  • Geben Sie hier n ein und drücken Sie die Eingabetaste

Konfigurationsort von Babel, ESLint usw.

Wo platzieren Sie die Konfiguration für Babel, ESLint usw. lieber? (Verwenden Sie die Pfeiltasten.)
> In dedizierten Konfigurationsdateien
 In package.json
  • Wählen Sie hier die erste dedizierte Konfigurationsdatei zum Speichern aus

Als Vorgabe speichern

? Dies als Vorgabe für zukünftige Projekte speichern? (j/n)
  • Hier wählen wir n

Erfolg schaffen

Vue CLI v4.5.11
Projekt wird in D:\MyStudy\myvue2 erstellt.
⚙️ CLI-Plugins werden installiert. Dies kann eine Weile dauern ...


> [email protected] nach der Installation D:\MyStudy\myvue2\node_modules\core-js
> Knoten -e "versuche {require('./postinstall')}catch(e){}"


> [email protected] nach der Installation D:\MyStudy\myvue2\node_modules\ejs
> Knoten ./postinstall.js

1208 Pakete von 928 Mitwirkenden in 21.836 Sekunden hinzugefügt

61 Pakete suchen nach Finanzierung
Führen Sie „npm fund“ aus, um weitere Details zu erfahren.

🚀 Generatoren aufrufen …
📦 Zusätzliche Abhängigkeiten installieren …

5 Pakete von 1 Mitwirkenden in 4,671 s hinzugefügt

61 Pakete suchen nach Finanzierung
Führen Sie „npm fund“ aus, um weitere Details zu erfahren.    

⚓ Vervollständigungs-Hooks ausführen …

📄 README.md wird generiert …

🎉 Projekt myvue2 erfolgreich erstellt.  
👉 Beginnen Sie mit den folgenden Befehlen:

$ cd myvue2
$ npm ausführen serve

Geben Sie das Projektverzeichnis ein

> CD myvue2

Starten des Dienstes

> npm ausführen serve
 FERTIG Erfolgreich kompiliert in 2492 ms                   

 App läuft unter:
 - Lokal: http://localhost:8080/ 
 - Netzwerk: http://192.168.17.154:8080/

 Beachten Sie, dass die Entwicklungsversion nicht optimiert ist.
 Führen Sie „npm run build“ aus, um einen Produktionsbuild zu erstellen.

Damit ist dieser Artikel über die detaillierten Schritte zum Erstellen eines Vue-Scaffolding-Projekts abgeschlossen. Weitere relevante Inhalte zum Erstellen eines Vue-Scaffolding-Projekts finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:
  • Mehrere Möglichkeiten zum Einführen von Popup-Layer-Plug-Ins in das Vue-CLI-Gerüst
  • Ursachen und Lösungen für Fehler bei der Erstellung von statischen Ressourcenanforderungen für Vue-CLI-Scaffolding
  • Spezifische Verwendung des VUE-Gerüsts
  • So erstellen Sie Ihr eigenes Gerüst, indem Sie vue-cli imitieren

<<:  Detailliertes Tutorial zur Installation von mysql8.0 mit dem Linux-Befehl yum

>>:  Zusammenfassung zur Verwendung des Ausrufezeichen-Befehls (!) unter Linux

Artikel empfehlen

vue + springboot realisiert den Login-Bestätigungscode

In diesem Artikelbeispiel wird der spezifische Co...

Analyse der Verschachtelungsregeln von XHTML-Tags

In der XHTML-Sprache wissen wir alle, dass das ul...

Detaillierte Erläuterung der MySQL SQL-Anweisungsanalyse und Abfrageoptimierung

So erhalten Sie SQL-Anweisungen mit Leistungsprob...

Eine kurze Diskussion über die Docker-Compose-Netzwerkeinstellungen

Tutorial zur Netzwerknutzung Offizielle Website d...

Analyse impliziter Fehler bei der gleichzeitigen Replikation von MySQL 5.7

Vorwort Die meisten unserer MySQL-Onlineumgebunge...

Implementierung der CSS-Bildlaufleisten-Stileinstellungen

WebKit-Bildlaufleistenstil zurücksetzen 1. Die Bi...

So überspringen Sie Fehler bei der MySQL-Master-Slave-Replikation

1. Traditionelle Binlog-Master-Slave-Replikation,...

Unterschied zwischen varchar- und char-Typen in MySQL

Inhaltsverzeichnis vorgenannt VARCHAR-Typ VARCHAR...

40 Webseiten-Designs mit supergroßen Schriftarten

Heutige Webdesigns neigen dazu, sehr große Schrif...

So fügen Sie einer Tabelle in SQL Felder und Kommentare hinzu

1. Felder hinzufügen: Tabelle Tabellennamen änder...