Methode zur Erstellung von Vue-Scaffolding-Lernprojekten

1. Was ist Scaffolding?

1. Vue-CLI

Vue CLI ist ein vollständiges System für die schnelle Entwicklung auf Basis von Vue.js und bietet:

• Interaktives Projekt-Scaffolding, implementiert durch @vue/cli.
• Über @vue/cli + @vue/cli-service-global
• Es wird ein Prototyping ohne Konfiguration erreicht.
• Eine Laufzeitabhängigkeit (@vue/cli-service), die:
• Aufrüstbar;
• Basierend auf Webpack mit angemessener Standardkonfiguration;
• Es kann über Konfigurationsdateien innerhalb des Projekts konfiguriert und über Plugins erweitert werden.
• Eine umfangreiche Sammlung offizieller Plugins, die die besten Tools in das Front-End-Ökosystem integriert.
• Eine vollständig grafische Benutzeroberfläche zum Erstellen und Verwalten von Vue.js-Projekten.

Vue CLI hat sich der Standardisierung der grundlegenden Tools im Vue-Ökosystem verschrieben. Es stellt sicher, dass verschiedene Build-Tools basierend auf intelligenten Standardkonfigurationen reibungslos verbunden werden können, sodass Sie sich auf das Schreiben von Anwendungen konzentrieren können, anstatt sich tagelang mit Konfigurationsproblemen herumzuschlagen. Gleichzeitig bietet es auch die Flexibilität, die Konfiguration jedes Werkzeugs anzupassen, ohne es auswerfen zu müssen.

2. Eigenschaften:

• Schnelles und automatisches Erstellen von Vorlagenprojekten
• Umgebung automatisch installieren und konfigurieren
  

3. Installationsmethode

Hinweis: Unter der Voraussetzung, dass ein npm-Tool vorhanden ist

Öffnen Sie das Terminal, geben Sie den Befehl cmd ein und laden Sie die globale Umgebung herunter (es wird empfohlen, die globale Umgebung herunterzuladen).

 npm install -g @vue/cli

4. Überprüfen Sie die Versionshinweise nach dem Download

vue --version

5. Upgrade-Version

npm update -g @vue/cli

2. Projekterstellung

Erstellen eines Projekts

vue erstelle meineApp

Treffen Sie Entscheidungen entsprechend den Eingabeaufforderungen

Schritt 1: Wählen Sie die Installationsmethode - Benutzerdefinierte Installation

Standard ([Vue 2] babel, eslint)

Standard (Vue 3 Vorschau) ([Vue 3] babel, eslint)

Manuelles Auswählen von Features

Schritt 2: Wählen Sie das zu installierende Modul aus

◉ Vue-Version auswählen — Wählen Sie die Ansichtsversion

◉ Babel – JavaScript analysieren

◯ TypeScript – ts analysieren

◉ Unterstützung für Progressive Web Apps (PWA)

◉ Router

◉ Vuex – Zustandsverwaltung

◉ CSS-Präprozessoren

◉ Linter / Formatter — Codeformatierung

◉ Unit-Tests — Test-Plugin

◉ E2E-Test — Test-Plugin

Schritt 3: Routing-Modus auswählen (optional und später anpassbar)

Verlauf — http://localhost:81/ Backend-Unterstützung

Hash – http://localhost:81/#/ Keine Backend-Unterstützung erforderlich

Schritt 4: Wählen Sie, wie CSS verarbeitet werden soll (wählen Sie hier „scss“ in der Knotenumgebung aus).

sass/scss - Knoten

Schritt 5: Code-Verifizierungsregeln - Standardregeln: Standard

ESLint nur mit Fehlerverhinderung

ESLint + Airbnb-Konfiguration

ESLint + Standardkonfiguration

ESLint + Prettier

Schritt 6: Wann überprüfen: Beim Speichern

◉ Flusen beim Speichern

◯ Lint und Fix beim Commit

Schritt 7: Testmodul auswählen: Optional

Schritt 8: End-to-End-Testlösung: Standard

Schritt 9: Projektkonfigurationsdatei

Paket.json

Schritt 10: Möchten Sie die aktuelle Konfiguration speichern?

Warten Sie, bis die Erstellung der Projektarchitektur abgeschlossen ist

3. Projektkatalog Einführung

1. Stammverzeichnis

+ node_modules --- Abhängigkeiten des Projekts
+ public --- Grundlegende Seitenstruktur und statische Ressourcen
+ src --- Arbeitsbereich, Entwicklungsumgebung
+ Tests --- Tests
.browserslistrc --- Browserkonfiguration
.editorconfig --- Editorkonfiguration
.eslintrc --- Codeformatierungskonfiguration
.gitignore --- Von Git ignorierte Dateikonfiguration
babel.config.js --- Babel-Konfiguration
cypress.json --- Testen Sie zugehörige Plugins
package.json --- Beschreibung der Projektabhängigkeiten
README.md --- Beschreibungsdatei

2.src-Verzeichnis

+ Assets --- statische Ressourcen
+ Komponenten --- Komponenten
+ Router --- Routing
+ speichern --- Zustandsmanager
+ Ansichten --- Seiten
App.vue --- Hauptseitenstruktur
main.js --- Der Einstiegspunkt des Programms

Zusammenfassen

Dies ist das Ende dieses Artikels über die Projekterstellungsmethode des Vue-Scaffolding-Lernens. Weitere relevante Inhalte zur Vue-Scaffolding-Projekterstellung finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!