Erfahren Sie, wie Sie in fünf Minuten mit vue-cli3 ein Projekt erstellen (Anleitung für Anfänger)

1. Erstellen Sie die Vue-Umgebung

Installieren Sie Nodejs. Laden Sie Nodejs von der offiziellen Website herunter. Wenn Sie eine stabile Entwicklungsumgebung wünschen, laden Sie die stabile LTS-Version (Long Time Support) herunter.

Klicken Sie hier, um die offizielle Node-Website aufzurufen

Geben Sie nach der Installation node -v in cmd ein, um zu überprüfen, ob die Installation erfolgreich war. Wenn die Versionsnummer wie unten gezeigt angezeigt wird, war die Installation erfolgreich.

2. Vue-Gerüstwerkzeuge

Installieren Sie vue-cli global und geben Sie in die Befehlszeile ein:

npm install --g vue-cli

Die direkte Verwendung des offiziellen Images von npm in China ist sehr langsam. Es wird empfohlen, das Taobao-Image oder Garn zu verwenden

Die Installation des Taobao-Spiegels erfolgt wie folgt

npm install -g cnpm --registry=https://registry.npm.taobao.org
//Nach erfolgreicher Installation verwenden Sie cnpm i xxx anstelle von npm install xxx

3. Erstellen Sie ein Projekt

vue: Projektname erstellen

vue create code //wobei „Code“ der Name Ihres Projektverzeichnisses ist (drücken Sie zur Bestätigung die Eingabetaste und fahren Sie mit dem nächsten Schritt fort)

Zu Beginn erscheinen die folgenden beiden Elemente, wenn Sie die Eingabetaste drücken

Standard (Vue 3) ([Vue 3] babel, eslint) (Die Standardkonfiguration bietet Babel- oder Eslint-Unterstützung)
Manuelles Auswählen von Features

Wir können die Auf- und Ab-Tasten und die Leertaste verwenden, um auszuwählen, was wir benötigen. Im Allgemeinen wählen wir die manuelle Konfiguration.

4. Wählen Sie „Manuell auswählen“ (drücken Sie die Eingabetaste, um zu bestätigen und mit dem nächsten Schritt fortzufahren).

Wang beschrieb kurz die Funktion jedes Gegenstandes:

• Babel konvertiert hauptsächlich die ES6-Syntax in kompatibles JS (Auswahl)
• TypeScript unterstützt das Schreiben von Code mit TypeScript-Syntax
• Unterstützung für Progressive Web Apps (PWA) [Webseiten mehr wie native Apps gestalten]
• Der Router unterstützt das Plug-In für die Vue-Routing-Konfiguration (normalerweise ausgewählt).
• Vuex unterstützt den Vue-Programmstatusverwaltungsmodus (im Allgemeinen ausgewählt)
• CSS-Präprozessoren unterstützt CSS-Präprozessoren (normalerweise ausgewählt)
• Linter/Formatter unterstützt Codestilprüfung und Formatierung (ausgewählt)
• Komponententests
• E2E-Tests
  

Häufige Projektauswahlen sind wie folgt

5. Nach Abschluss der Auswahl drücken Sie die Eingabetaste. Hier wählen wir 3.x

6. Drücken Sie nach Abschluss die Eingabetaste, um die folgende Schnittstelle anzuzeigen

Dies bedeutet, dass Sie gefragt werden, ob dieses Projekt den Verlaufsmodus verwendet. Wenn Sie „Y“ wählen, müssen Sie den Hintergrund konfigurieren. Weitere Informationen finden Sie auf der offiziellen Website von vueRouter. Hier wählen wir n

7. Drücken Sie die Eingabetaste, um die folgende Schnittstelle anzuzeigen

Das bedeutet, dass Sie gefragt werden, welche CSS-Vorverarbeitungssprache Sie wählen sollen. Ich verwende in meinem Projekt im Allgemeinen SCSS. Ich wähle die erste.

8. Drücken Sie die Eingabetaste, um die folgende Schnittstelle anzuzeigen

Das bedeutet, dass Sie eine Möglichkeit zur Formatierung des Codes wählen müssen: Normalerweise wähle ich ESLint + Prettier

9. Drücken Sie die Eingabetaste, um die folgende Schnittstelle anzuzeigen

Das bedeutet, dass Sie gefragt werden, wann die Coderegelerkennung durchgeführt werden soll. Normalerweise wähle ich die Erkennung beim Speichern, also Lint on Save

10. Drücken Sie die Eingabetaste, um die folgende Schnittstelle anzuzeigen

Hiermit meinen wir, wo die Konfigurationsdateien für Babel, PostCSS und ESLint abgelegt werden sollen. Normalerweise legen wir sie an einem separaten Ort ab, um die Datei package.json übersichtlicher zu gestalten. Wählen Sie also den ersten Ort.

11. Drücken Sie die Eingabetaste, um die folgende Schnittstelle anzuzeigen

Hier werden Sie gefragt, ob Sie diese Konfigurationsauswahl aufzeichnen möchten. Nach der Auswahl werden Sie aufgefordert, dieser Konfiguration einen Namen zu geben, damit Sie die Auswahl beim nächsten Mal schnell konfigurieren können. Drücken Sie abschließend die Eingabetaste, um das Projekt zu initialisieren. Nach Abschluss sieht es wie folgt aus:

12. Starten Sie das Projekt gemäß den Eingabeaufforderungen

Gemäß den Anweisungen führen wir zuerst CD-Code aus und führen dann npm run serve aus

13. Wenn wir Webpack-bezogene Konfigurationen anpassen müssen, müssen wir eine Datei vue.config.js im Stammverzeichnis des Projekts erstellen. Sie wird automatisch von @vue/cli-server geladen. Die offizielle Website bietet detaillierte Konfigurationsinhalte. Sie können auf die offizielle Website gehen, um sie sich anzusehen. Das ist alles für heute. Bis zum nächsten Mal am Ende dieser Ausgabe! ! !

Dies ist das Ende dieses Artikels, in dem ich Ihnen beigebracht habe, wie Sie mit vue-cli3 in fünf Minuten ein Projekt erstellen (für Anfänger). Weitere relevante Inhalte zur Erstellung von Projekten mit vue-cli3 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!