Vue-cli erstellt ein Projekt und analysiert die Projektstruktur

Im vorherigen Artikel haben wir vue-cli cli installiert. Als Nächstes verwenden wir das Gerüst, um ein Projekt zu erstellen.

1. Geben Sie ein Verzeichnis ein und erstellen Sie ein Projekt

Der Befehl zum Erstellen eines Projekts lautet wie folgt:

vue create <Projektname> //Der Dateiname unterstützt kein Camel Case (einschließlich Großbuchstaben)

Nach Eingabe des Befehls werden Sie aufgefordert, eine preset auszuwählen

Wir sehen, dass standardmäßig drei Optionen zur Verfügung stehen:

• Die preset beinhaltet grundlegende Babel + ESLint -Einstellungen (Vue2-Version)
• Die preset beinhaltet grundlegende Babel + ESLint -Einstellungen (Vue3-Version)
• Manually select features ist eine benutzerdefinierte Konfiguration
  

Wir wählen die dritte benutzerdefinierte Konfiguration

2. Wählen Sie das gewünschte Konfigurationselement aus

Dann springen wir zu den Konfigurationselementen. Meine benutzerdefinierte Konfiguration sieht wie folgt aus:

Die konkrete Erklärung lautet wie folgt:

 ◉ Vue-Version auswählen // Wählen Sie die Version von Vue. ◉ Babel // Transcoder, der ES6-Code in ES5-Code konvertieren kann, sodass er in der vorhandenen Umgebung ausgeführt werden kann. 
 ◯ TypeScript // TypeScript ist eine Obermenge von JavaScript (Suffix .js) (Suffix .ts), die die Syntax von JavaScript einschließt und erweitert und kompiliert und als JavaScript ausgegeben werden muss, um im Browser ausgeführt zu werden. ◯ Progressive Web App (PWA) Support // Progressive Web Application ◉ Router // vue-router (vue routing)
 ◉ Vuex // vuex (Statusverwaltungsmodus von Vue)
 ◉ CSS-Präprozessoren // CSS-Präprozessoren (wie Less, Sass)
 ◉ Linter / Formatter // Codestilprüfung und Formatierung (z. B. ESlint)
 ◯ Unit-Tests
 ◯ E2E-Tests

Nachdem die Konfiguration ausgewählt ist, drücken wir die Eingabetaste, um zum nächsten Schritt zu gelangen

2.1 Wählen Sie die Vue-Version

Als nächstes müssen wir die vue Version auswählen, hier wählen wir die Version vue2.x

Nachdem Sie Ihre Auswahl getroffen haben, drücken Sie die Eingabetaste, um fortzufahren.

2.2 Wählen Sie, ob Sie den Verlaufsrouter verwenden möchten

Dann werden wir gefragt, ob wir history router verwenden möchten. Tatsächlich ist es ganz einfach zu sagen, ob der Pfad # 號hat. Es wird empfohlen, n zu wählen, andernfalls muss der Server konfiguriert werden

2.3 Auswahl eines CSS-Präprozessors

Der von mir gewählte css Präprozessor ist Sass/SCSS (mit Dart-Sass). node-sass wird automatisch in Echtzeit kompiliert. dart-sass muss gespeichert werden, bevor es wirksam wird.

2.4 Wählen Sie Eslint-Codevalidierungsregeln aus

Wählen Sie dann die ESLint Codeüberprüfungsregel aus, die ein Plug-In-Tool zur Erkennung javascript Code bereitstellt. ESLint + Prettier wird häufiger verwendet.

2.5 Wählen Sie, wann die Code-Regelprüfung durchgeführt werden soll

Anschließend können Sie wählen, wann die Coderegelerkennung durchgeführt werden soll:

( ) Lint on save // ​​Prüfen beim Speichern ( ) Lint and fix on commit // Prüfen beim Fixieren und Commit

Es wird empfohlen, nach dem Speichern einen Test durchzuführen. Bis zum commit haben sich möglicherweise bereits viele Probleme angesammelt.

2.6 Wählen Sie, wie die Konfiguration gespeichert werden soll

Wählen Sie als Nächstes aus, ob einige Konfigurationsdateien in separaten Dateien oder alle in package.json gespeichert werden sollen. Wir empfehlen die erste Option.

> In dedizierten Konfigurationsdateien // Unabhängige Dateiplatzierung In package.json // In package.json einfügen

2.7 Aktuelle Konfiguration speichern

Wählen Sie abschließend aus, ob die gerade ausgewählte Konfiguration gespeichert werden soll, damit Sie sie beim nächsten Erstellen anderer Projekte nicht einzeln erneut auswählen müssen. Wenn wir hier „y“ wählen, werden wir aufgefordert, den Namen der gespeicherten Konfigurationsinformationen einzugeben.

In welchem ​​Ordner wird die Konfiguration also nach dem Speichern gespeichert?

Antwort: Es befindet sich in der Datei .vuerc in unserem Benutzerverzeichnis. Wir wechseln in das Benutzerverzeichnis und verwenden den Befehl cat .vuerc.

Die Konfigurationsinformationen lauten wie folgt:

{
  "useTaobaoRegistry": wahr,
  "latestVersion": "4.5.13",
  "lastChecked": 1626320210348,
  "Voreinstellungen": {
    "testVueCli": {
      "useConfigFiles": wahr,
      "Plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-router": {
          "historyMode": falsch
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "hübscher",
          "lintEin": [
            "speichern"
          ]
        }
      },
      "vueVersion": "2",
      "cssPreprocessor": "Dart-Sass"
    }
  }
}% 

Hier sind die Konfigurationsinformationen, die wir gerade festgelegt haben. Wenn wir die Konfiguration löschen möchten, löschen wir einfach die Informationen in den Voreinstellungen.

3. Projektkonfigurationsdiagramm

Hier ist ein Bild aller Optionen, die wir gerade ausgefüllt haben.

4. Projekterstellung abgeschlossen

Schließlich bedeutet das folgende successfully im roten Feld, dass wir das Projekt erfolgreich durch vue-cli Gerüst erstellt haben.

5. Geben Sie npm run serve ein, um das Projekt zu starten

Nachdem das Projekt erstellt wurde, sieht das Projektverzeichnis wie folgt aus:

Wir gehen direkt in package.json , klicken links neben serve auf die Start-Schaltfläche und dann run serve . webstorm startet das Projekt automatisch für uns.

Nach Abschluss des Startvorgangs wird auf der Konsole der folgende Bildschirm angezeigt

Wenn wir auf http://localhost:8080/ klicken, wird die Homepage auf der Webseite angezeigt.

6. Projektstrukturanalyse

Nachdem wir das Projekt erstellt haben, müssen wir die Gesamtstruktur des Projekts kennen und wissen, was jeder Ordner und jede Datei des Projekts tut. Als Nächstes stellen wir die Konfiguration der Projektstruktur im Detail vor:

Projektstrukturkonfiguration:

Knotenmodule

Es enthält verschiedene Umgebungsabhängigkeitspakete, die vom Projekt benötigt werden

öffentlich

public Ordner speichert ein Website-Tag favicon.ico und index -Homepage. Beim zukünftigen Verpacken werden diese Dateien unverändert in dist gepackt.

Quelle

Der Quellcode, den wir für das Frontend geschrieben haben, befindet sich in diesem Ordner.

.browserslistrc

Diese Datei ist eine Konfiguration für den Browser. Der Inhalt der Datei ist wie folgt

> 1 %
letzte 2 Versionen
nicht tot

Im Allgemeinen sind keine Änderungen erforderlich

.eslintrc.js

Codestilerkennung. Wenn wir darin einige Coderegeln konfigurieren und beim Schreiben von Code Code vorhanden ist, der den Regeln nicht entspricht, wird beim Kompilieren ein Fehler gemeldet

.gitignore

Diese Datei dient dazu, beim Hochladen mit git bestimmte Dateien zu ignorieren. Der Inhalt ist wie folgt:

Docker-Datei
.DS_Store
Knotenmodule
/Verteilung


# lokale Umgebungsdateien
.Umgebung.lokal
.env.*.lokal

# Logdateien
npm-debug.log*
yarn-debug.log*
Garn-Fehler.log*
pnpm-debug.log*

# Verzeichnisse und Dateien bearbeiten
.Idee
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

Wenn Sie das gesamte Projekt auf den Git-Server hochladen, werden die Dateien mit den oben genannten Suffixen nicht hochgeladen.

bable.config.js

Die Datei, die bable konfiguriert, wird im Allgemeinen nicht geändert

Paket.json

Die Konfiguration des gesamten Projektpakets ist hier enthalten, einschließlich des Startprojektbefehls usw.

Dies ist das Ende dieses Artikels über die Erstellung vue-cli Projekten und die Analyse der Projektstruktur. Weitere relevante Inhalte zur Erstellung vue-cli Projekten 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!