Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Vue

Steigern Sie Ihren Vue.js-Workflow mit Vue CLI 3

by
Difficulty:IntermediateLength:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Wir können uns eine moderne Webentwicklung ohne die Hilfe von CLI-Tools (Command Line Interface) kaum vorstellen. Sie erleichtern und beschleunigen den Entwicklungsworkflow erheblich, indem sie die Anzahl sich wiederholender und langwieriger Aufgaben reduzieren. Das manuelle Einrichten eines Projekts mit all den Funktionen zum Flusen, Erstellen, Testen, Vorverarbeiten, Optimieren und Verfolgen von Abhängigkeiten klingt nicht nach einem unterhaltsamen Job, oder?

Aus diesem Grund bieten alle modernen clientseitigen Entwicklungsframeworks (wie Angular, React usw.) eine eigene Version der CLI-Tools an, und Vue.js ist keine Ausnahme. Mit der neuesten dritten Version ist Vue CLI den anderen jedoch einen Schritt voraus. Es ist jetzt nicht nur sehr leistungsfähig und flexibel, sondern verfügt auch über eine vollständige Benutzeroberfläche. Ja, du hast richtig gehört. Vue CLI 3 bietet eine vollständige grafische Benutzeroberfläche.

Das Starten neuer Vue.js-Projekte ist jetzt mit der neuen Vue-CLI und der Vue-Benutzeroberfläche einfacher als je zuvor. Dieses Tutorial zeigt Ihnen, wie Sie Vue CLI verwenden und wie die Vue-Benutzeroberfläche Ihren Workflow noch weiter beschleunigen kann. Lassen Sie uns anfangen!

Was ist Vue CLI?

Vue CLI ist eine Reihe von Tools für Rapid Prototyping, einfaches Anwendungsgerüst und effizientes Projektmanagement. Es besteht aus drei Hauptwerkzeuggurten:

  • CLI ist ein global installiertes npm-Paket, das über den Befehl vue Kernfunktionen bereitstellt. Es ermöglicht uns, ein neues Projekt einfach zu erstellen (vue create) oder einfach schnell rohe Ideen zu prototypisieren (vue serve). Wenn wir eine konkretere und visuellere Kontrolle über unsere Projekte wünschen, können wir die GUI-Version der CLI öffnen, indem wir den Befehl vue ui ausführen.
  • Der CLI Service ist eine Entwicklungsabhängigkeit (eine vue-cli-service-Binärdatei), die lokal in jedem mit der CLI erstellten Projekt installiert wird. Es ermöglicht uns, unser Projekt zu entwickeln (vue-cli-service serve), es für die Produktion zu verpacken (vue-cli-service build) und auch die Konfiguration des internen Webpack-Projekts zu überprüfen (vue-cli-service inspect).
  • CLI Plugins sind npm-Pakete, die unseren Projekten zusätzliche Funktionen bieten. Ihre Namen beginnen entweder mit @vue/cli-plugin- (für eingebaute Plugins) oder vue-cli-plugin- (für Community-Plugins). Wir können sie jederzeit während des Entwicklungsprozesses über den Befehl vue add hinzufügen.

In den nächsten Abschnitten werden wir alle Schrauben und Muttern der oben genannten Tools und Dienstprogramme untersuchen. Lassen Sie uns jedoch zunächst die tatsächlichen Funktionen betrachten, die Vue CLI so leistungsfähig und flexibel machen.

Vue CLI ist ein voll ausgestattetes System zur Verbesserung unseres Vue.js-Entwicklungsworkflows

Vue CLI beschleunigt und vereinfacht die Projektentwicklung von Vue.j dank seiner großen Sammlung von Funktionen. Schauen wir mal, welche Funktionen das sind:

  • Plugin-basierte Architektur. Vue CLI basiert vollständig auf Plugins, was es sehr flexibel und erweiterbar macht. Wir können auswählen, welche der integrierten Plugins während des Projekterstellungsprozesses hinzugefügt werden sollen. Wir sind jedoch nicht nur auf diese beschränkt, sondern können jederzeit nach der Erstellung des Projekts eine beliebige Anzahl von Plugins hinzufügen.
  • Vue CLI ist vollständig konfigurierbar, erweiterbar und aktualisierbar.
  • Eine Reihe offizieller vorinstallierter Plugins, die erstklassige Tools aus dem Front-End-Ökosystem (Babel, ESLint, TypeScript, PWA, Jest, Mocha, Cypress und Nightwatch) integrieren.
  • Eine einzelne Standardvoreinstellung, die wir während oder nach der Projekterstellung an unsere Anforderungen anpassen können.
  • Keine Notwendigkeit zum Auswerfen. Im Gegensatz zu den React- und Angular CLI-Tools können wir die Webpack-Konfiguration unseres Projekts jederzeit nach der Erstellung sicher überprüfen und optimieren, ohne die App auswerfen und zur manuellen Konfiguration wechseln zu müssen.
  • Mehrseitige Unterstützung.
  • Sofortiges Prototyping ohne Konfiguration.
  • Mit verschiedenen Build-Zielen können wir verschiedene Versionen unseres Projekts erstellen. Wir können ein und dieselbe Codebasis verwenden und sie als App, Bibliothek oder Webkomponente erstellen.
  • Moderne Modusfunktion. Dadurch wird unsere App für moderne Browser erstellt, für ältere jedoch automatisch. Cool was?
  • Eine umfassende Benutzeroberfläche zum einfachen Erstellen, Aktualisieren und Verwalten komplexer Projekte.
  • UI Plugin API. Die Vue-Benutzeroberfläche stellt eine Plugin-API bereit, mit der wir der GUI-Version der CLI benutzerdefinierte Funktionen hinzufügen können.
  • Viele nützliche Plugins aus der Community.

Erste Schritte mit Vue CLI

Nachdem wir etwas über die Vue CLI-Magie gelernt haben, ist es Zeit, sie in der Praxis zu sehen. Zuerst müssen wir Vue CLI 3 installieren. Es erfordert Node.js 8.9+ (8.11.0+ empfohlen), also müssen wir sicherstellen, dass wir es auf unseren Computern haben. Dann öffnen wir einfach unser Terminal oder unsere Eingabeaufforderung und führen Folgendes aus:

Nach Abschluss der Installation können wir den Befehl vue verwenden. Um zu überprüfen, ob alles richtig funktioniert, führen wir vue --version aus. Dies sollte die installierte Vue CLI-Version anzeigen. Lassen Sie uns nun untersuchen, was wir mit Vue CLI tatsächlich tun können.

Instant Prototyping

Obwohl Vue CLI in erster Linie für die Arbeit mit komplexen Projekten konzipiert ist, können wir unsere Rohideen schnell und mühelos ausprobieren. Die Instant Prototyping-Funktion kann durch Installation des globalen Vue CLI Service-Addons aktiviert werden:

Von nun an können wir den Befehl vue serve verwenden, wann immer wir wollen. Lassen Sie es uns versuchen. Wir erstellen eine App.vue-Datei mit folgendem Inhalt:

Dann führen wir im selben Verzeichnis Folgendes aus:

Dadurch wird der Vue CLI-Entwicklungsserver gestartet und die App unter http://localhost:8080/ ausgeführt. Wenn wir den Browser unter dieser Adresse öffnen, sollten wir ein schönes Hello, Vue! Überschrift.

Neues Projekt erstellen

Der vorherige Abschnitt war nur ein Aufwärmen. Lassen Sie uns jetzt etwas komplexer machen.

Der Befehl vue create verwendet einen interaktiven Prozess zum Auswählen der Optionen für ein neues Projekt. Lassen Sie es uns ausführen und die Optionen durchgehen.

Erstellen Sie ein neues Projekt mit Vue CLI

Create a project with Vue CLI pick a presetCreate a project with Vue CLI pick a presetCreate a project with Vue CLI pick a preset

Im ersten Fenster werden wir aufgefordert, eine Voreinstellung auszuwählen. Es ist standardmäßig nur eine Voreinstellung verfügbar, die als Standardvoreinstellung bezeichnet wird. Wir wählen die zweite Option, nämlich die manuelle Auswahl der für das Projekt benötigten Funktionen, und drücken die Eingabetaste, um fortzufahren.

Create a project with Vue CLI Manually select featuresCreate a project with Vue CLI Manually select featuresCreate a project with Vue CLI Manually select features

Im nächsten Fenster navigieren wir mit den Pfeiltasten in der Liste der Features nach oben und unten und wählen mit der Leertaste aus, was wir möchten. Hier habe ich neben dem bereits ausgewählten Babel und Linter/Formatter auch Router und Vuex überprüft. Wenn Sie die gewünschten Funktionen ausgewählt haben, drücken Sie die Eingabetaste, um fortzufahren.

Create a project with Vue CLI Use history modeCreate a project with Vue CLI Use history modeCreate a project with Vue CLI Use history mode

Im nächsten Fenster werden wir gefragt, ob der Verlaufsmodus für den Router verwendet werden soll. Ich habe gerade die Eingabetaste gedrückt, um die Standardeinstellung Ja zu akzeptieren.

Create a project with Vue CLI Pick a linterCreate a project with Vue CLI Pick a linterCreate a project with Vue CLI Pick a linter

Im nächsten Fenster müssen wir auswählen, wie der Linter konfiguriert werden soll. Ich habe ESLint + Prettier ausgewählt.

Create a project with Vue CLI Additional lint featuresCreate a project with Vue CLI Additional lint featuresCreate a project with Vue CLI Additional lint features

Im nächsten Fenster wählen wir aus, wann der Linter zur Inspektion des Projekts verwendet wird. Ich habe Lint beim Speichern ausgewählt, das jedes Mal gilt, wenn eine Datei gespeichert wird.

Create a project with Vue CLI Dedicated config file or config in packagejsonCreate a project with Vue CLI Dedicated config file or config in packagejsonCreate a project with Vue CLI Dedicated config file or config in packagejson

Im nächsten Fenster müssen wir entscheiden, wie wir unser Projekt konfigurieren möchten. Wählen Sie aus, ob Sie für jede der Funktionen separate Konfigurationsdateien verwenden oder alle Konfigurationseinstellungen in die Datei package.json aufnehmen möchten. Ich bevorzuge eine einzelne Datei und habe die Option In package.json ausgewählt.

Create a project with Vue CLI Save these settings as a presetCreate a project with Vue CLI Save these settings as a presetCreate a project with Vue CLI Save these settings as a preset

Im letzten Fenster können wir die gesamte Konfiguration der Projekterstellung als benutzerfreundliche Voreinstellung für zukünftige Projekte speichern. Ich habe meine als spa-simple gespeichert. Voreinstellungen werden im Benutzerordner in der .vuerc-Datei gespeichert.

Wenn wir den Erstellungsprozess abgeschlossen haben, wird das Projekt erstellt und konfiguriert, und die erforderlichen Pakete werden heruntergeladen und installiert.

Create a project with Vue CLI Generating project filesCreate a project with Vue CLI Generating project filesCreate a project with Vue CLI Generating project files

Erkundung der Projektstruktur

In diesem Abschnitt erfahren Sie, was Vue CLI für uns erstellt hat.

Create a project with Vue CLI The project structure

In dem oben gezeigten Projektordner haben wir die folgenden Dateien und Ordner:

  • Der node_modules-Ordner enthält die Pakete, die für die App und die Entwicklungstools erforderlich sind.
  • Der public-Ordner enthält statische Projektressourcen, die nicht in den Bündelungsprozess einbezogen werden.
  • Der src-Ordner enthält die Anwendung Vue.js mit allen Ressourcen.
  • .gitignore enthält eine Liste von Dateien und Ordnern, die von der Git-Versionskontrolle ausgeschlossen sind.
  • babel.config.js enthält die Konfigurationseinstellungen für den Babel-Compiler.
  • package.json enthält eine Liste der für die Entwicklung von Vue.js erforderlichen Pakete sowie die für die Entwicklungstools verwendeten Befehle.
  • package-lock.json enthält eine vollständige Liste der vom Projekt benötigten Pakete und ihrer Abhängigkeiten.
  • README.md enthält allgemeine Informationen zum Projekt.

Der neu erstellte src-Ordner

Schauen wir uns jetzt den src-Ordner genauer an:

Create a project with Vue CLI the src folder

In dem oben gezeigten src-Ordner befinden sich die folgenden Dateien und Ordner:

  • Der assets-Ordner wird für statische Ressourcen verwendet, die von der App benötigt werden und in den Bündelungsprozess einbezogen werden.
  • Der components-Ordner wird für die Komponenten der Anwendung verwendet.
  • Der view-Ordner wird für Komponenten verwendet, die mithilfe der URL-Routing-Funktion angezeigt werden.
  • App.vue ist die Stammkomponente.
  • main.js ist die JavaScript-Datei, die das Vue-Instanzobjekt erstellt.
  • Mit router.js wird der Vue-Router konfiguriert.
  • Mit store.js wird der mit Vuex erstellte Datenspeicher konfiguriert.

Ändern der Projektkonfiguration

Die Standardprojektkonfiguration enthält sinnvolle Einstellungen. Bei Bedarf können wir diese jedoch ändern, indem wir eine Datei vue.config.js im Projektordner hinzufügen oder der Datei package.json einen vue-Abschnitt hinzufügen. Versuchen wir es mit dem ersten: Wir erstellen eine vue.config.js-Datei und fügen die folgende Option hinzu:

Auf diese Weise können Komponenten ihre Vorlagen als Zeichenfolgen definieren, anstatt template-Elemente zu verwenden. Um die vollständigen Konfigurationsoptionen zu erkunden, besuchen Sie die Seite Vue CLI Config.

Das Projekt entwickeln

Wie wir oben gesehen haben, enthält der Vue CLI-Dienst drei Standardskripte: serve, build und inspect. Der erste wird für den Entwicklungsprozess verwendet. Wir führen unser Projekt mit dem Befehl npm run serve aus:

Starting the development serverStarting the development serverStarting the development server

Wenn wir unsere App im Browser öffnen, sollte folgende Seite angezeigt werden:

Running the new appRunning the new appRunning the new app

Dies ist die Home.vue-Seite, die die HelloWorld.vue-Komponente verwendet.

Der Befehl serve startet einen Entwicklungsserver, der auf dem webpack-dev-server basiert, mit einer funktionierenden HMR-Funktion (Hot Module Replacement). Das heißt, wenn wir Änderungen an unseren Komponenten vornehmen und diese speichern, werden diese sofort wiedergegeben und die Seite im Browser aktualisiert.

Hinzufügen neuer Funktionen zum Projekt mit Vue CLI-Plugins

Zu einem bestimmten Zeitpunkt unserer App-Entwicklung müssen wir dem Projekt möglicherweise einige zusätzliche Funktionen hinzufügen. Dazu müssen wir Vue CLI-Plugins installieren. Ein Vue CLI-Plugin kann die Webpack-Konfiguration ändern und neue Befehle an den vue-cli-service senden. Um ein Plugin zu installieren, verwenden wir den Befehl vue add.

Nehmen wir an, wir möchten Bootstrap-Komponenten für unser Projekt verwenden. Glücklicherweise gibt es ein bootstrap-vue-Plugin, das sie für uns bereitstellen kann. Um es zu installieren, führen wir Folgendes aus:

Nach der Installation des Plugins finden wir im src-Ordner  einen neuen Plugin-Ordner, in dem sich das neue Plugin befindet.

Um die Funktionalität des Plugins zu testen, ändern wir nun die Datei About.vue:

Und wenn wir im Browser auf die Seite Über verweisen, sollte die Seite mit dem Bootstrap aktualisiert und gestaltet werden:

App updated with BootstrapApp updated with BootstrapApp updated with Bootstrap

Erstellen des Projekts für die Produktion

Wenn die App bereit zur Bereitstellung ist, müssen Sie eine Reihe von Bundles erstellen, die nur den App-Code und -Inhalt sowie die Module enthalten, von denen sie abhängen, damit diese Dateien auf einem Produktions-HTTP-Server bereitgestellt werden können.

App erstellen

Um unsere App zu erstellen, führen wir Folgendes aus:

Das Argument --modern erstellt zwei Versionen der Anwendung. Einer davon ist für moderne Browser gedacht, die die neuesten JavaScript-Funktionen unterstützen, und der andere ist ein Fallback für ältere Browser, die zusätzliche Bibliotheken benötigen, um diese Funktionen zu verarbeiten. Das Coole ist, dass nach der Bereitstellung der App die Auswahl der zu verwendenden Version vollständig automatisch erfolgt!

Hinweis: Wenn wir den Befehl build ausführen, können wir mit der Vue-CLI eine Option --target angeben, mit der wir unsere Codebasis für verschiedene Anwendungsfälle verwenden können. Das Standard-Build-Ziel ist für das Erstellen einer App festgelegt. Wir haben zwei weitere Optionen zur Auswahl: Sie können unseren Code als Bibliothek oder als Webkomponente erstellen. Weitere Informationen finden Sie auf der Seite Build-Ziele.

Erkunden des dist-Ordners

Nach Abschluss des Erstellungsprozesses wird im Projektstamm ein dist-Ordner erstellt. Lassen Sie uns den Inhalt untersuchen:

The dist folder

Die Datei index.html ist der Einstiegspunkt für die Anwendung. Es enthält link- und script-Elemente, die alle benötigten CSS- und JavaScript-Dateien aus den Ordnern css und js laden.

Jetzt können wir unsere App auf einem Produktionsserver bereitstellen. Es gibt viele Möglichkeiten zur Auswahl. Sie können viele davon kennenlernen, indem Sie die Bereitstellung-Seite besuchen.

Lassen Sie uns unser Projekt mit Vue UI GUI-fy

Vue CLI 3 ist sehr leistungsfähig, hat aber einen Preis. Es gibt zu viele Auswahlmöglichkeiten, Befehle und Optionen zum Konfigurieren und Speichern. Dies macht es komplexer und schwieriger, damit zu arbeiten. Um die Dinge wieder in einen einfachen und glücklichen Zustand zu bringen, hat Guillaume Chau eine Vue-Benutzeroberfläche erstellt, die das Entwicklungserlebnis erheblich vereinfacht und zugänglicher macht. Anfangs mag es etwas seltsam klingen, ein CLI-Tool mit einer grafischen Oberfläche zu kombinieren, aber wie Sie später sehen werden, ist diese außergewöhnliche Symbiose ziemlich leistungsfähig und effizient.

Neuerstellung unseres Projekts mit Vue UI

In diesem Abschnitt werden wir uns mit der Erstellung des gleichen Projekts befassen, das wir zuvor erstellt haben. Diesmal verwenden wir jedoch die Vue-Benutzeroberfläche.

Vue UI wird mit einem eigenen UI-Framework erstellt und es wird kein Electron benötigt, um es im Browser auszuführen. Führen Sie einfach den Befehl vue ui aus, egal in welchem Verzeichnis:

The Vue UI homescreenThe Vue UI homescreenThe Vue UI homescreen

Vue Project Manager wird mit der ausgewählten Registerkarte Projekte gestartet. Es sind noch keine Projekte vorhanden. Damit einige Projekte hier aufgelistet werden, müssen sie entweder über die Benutzeroberfläche erstellt oder mit der CLI erstellte Projekte importiert werden. Mal sehen, wie wir ein neues Projekt erstellen können.

The Vui UI create project tabThe Vui UI create project tabThe Vui UI create project tab

Wir wechseln zur Registerkarte Erstellen, navigieren zum gewünschten Verzeichnis für unsere App und klicken hier auf die Schaltfläche Neues Projekt erstellen.

Create a new project with Vue UI pick a folderCreate a new project with Vue UI pick a folderCreate a new project with Vue UI pick a folder

Im nächsten Bildschirm geben wir dem Projektordner einen Namen und wählen den gewünschten Paketmanager aus.

Create a new project with Vue UI Select a presetCreate a new project with Vue UI Select a presetCreate a new project with Vue UI Select a preset

Im nächsten Bildschirm können wir eine Voreinstellung für das Projekt auswählen. Dies kann die Standardeinstellung, das Handbuch, eine Fernbedienung oder eine benutzerdefinierte Voreinstellung sein, die wir zuvor erstellt haben. spa-simple ist ein Beispiel für eine benutzerdefinierte Voreinstellung. Hier wählen wir Manuell.

Create a new project with Vue UI Select project featuresCreate a new project with Vue UI Select project featuresCreate a new project with Vue UI Select project features

Im nächsten Bildschirm wählen wir die Plugins aus, die wir installieren möchten.

Create a new project with Vue UI Select pluginsCreate a new project with Vue UI Select pluginsCreate a new project with Vue UI Select plugins

Schließlich legen wir die Konfigurationseinstellungen für die Plugins fest, die wir für die Installation ausgewählt haben. Wenn wir fertig sind, klicken wir auf die Schaltfläche Projekt erstellen.

Create a new project with Vue UI Welcome to your new projectCreate a new project with Vue UI Welcome to your new projectCreate a new project with Vue UI Welcome to your new project

Jetzt wird das Projekt erstellt und wir werden zum Dashboard des Projekts umgeleitet.

Vue UI Project DashboardVue UI Project DashboardVue UI Project Dashboard

Verwenden des Vue UI-Projekt-Dashboards

Im Abschnitt Plugins werden alle installierten Plugins aufgelistet. Um ein neues Plugin zu installieren, klicken wir auf die Schaltfläche Plugin hinzufügen.

Project Dashboard Plugins sectionProject Dashboard Plugins sectionProject Dashboard Plugins section

Hier können wir nach dem Plugin suchen, das wir benötigen, und wenn wir es finden, klicken wir auf die Schaltfläche Installieren. In unserem Fall suchen und installieren wir das bootstrap-vue-Plugin.

Project Dashboard add a pluginProject Dashboard add a pluginProject Dashboard add a plugin

Wenn das Plugin installiert ist, können wir auf der Registerkarte Konfiguration die bereitgestellten Optionen festlegen.

Project Dashboard Configuration tabProject Dashboard Configuration tabProject Dashboard Configuration tab

Auf der Registerkarte Dateien geändert können wir überprüfen, welche Dateien wie betroffen sind. Hier möchte ich keine Änderungen vornehmen, also drücke ich auf die Schaltfläche Überspringen.

Project Dashboard Dependencies tabProject Dashboard Dependencies tabProject Dashboard Dependencies tab

Im Abschnitt Abhängigkeiten haben wir alle Haupt- und Entwicklungsabhängigkeiten aufgelistet. Um eine Abhängigkeit hinzuzufügen, klicken wir auf die Schaltfläche Abhängigkeit installieren.

Project Dashboard Install new dependencyProject Dashboard Install new dependencyProject Dashboard Install new dependency

Im modalen Fenster können wir nach Haupt- oder Entwicklungsabhängigkeiten suchen und diese installieren.

Project Dashboard Plugin settingsProject Dashboard Plugin settingsProject Dashboard Plugin settings

Im Abschnitt Konfiguration können wir die Einstellungen für die von uns hinzugefügten Plugins anpassen. Hier haben wir Einstellungen für die Vue CLI selbst und für das ESLint-Plugin.

Project Dashboard Project tasks tabProject Dashboard Project tasks tabProject Dashboard Project tasks tab

Im Abschnitt Aufgaben können wir bequem alle verfügbaren Befehle verwenden, die von Vue CLI und anderen Plugins bereitgestellt werden. In diesem Bildschirm wird die serve-Aufgabe ausgewählt. Wir können die Parameter ändern, indem wir auf die Schaltfläche Parameter klicken.

Project Dashboard serve tasks parametersProject Dashboard serve tasks parametersProject Dashboard serve tasks parameters

Im modalen Fenster wählen wir die Parameter aus, mit denen wir die Aufgabe ausführen möchten.

Project Dashboard Running the serve taskProject Dashboard Running the serve taskProject Dashboard Running the serve task

Wenn wir die serve-Aufgabe ausführen, wird das Dashboard mit einigen nützlichen Informationen aktualisiert.

Project Dashboard serve task outputProject Dashboard serve task outputProject Dashboard serve task output

Wenn wir zur Registerkarte Ausgabe wechseln, erhalten wir die Protokolle für den Aufgabenprozess.

Project Dashboard serve task analyzerProject Dashboard serve task analyzerProject Dashboard serve task analyzer

Wenn wir zur Registerkarte Analyzer wechseln, erhalten wir ein schönes Diagramm, in dem die Informationen für das gesamte Projekt zusammengefasst sind.

Die build-Task ähnelt fast der serve-Task, mit der Ausnahme, dass erstere ein Produktionspaket erstellt, mit dem die Anwendung bereitgestellt werden kann.

Project Dashboard build task parametersProject Dashboard build task parametersProject Dashboard build task parameters

Wir können Parameter für die build-Task auf die gleiche Weise wie für die serve-Task festlegen.

Project Dashboard build task outputProject Dashboard build task outputProject Dashboard build task output

Das Ausgabefeld der inspect-Aufgabe gibt Auskunft über die aufgelöste Webpack-Konfiguration.

Und das ist es. Wir haben unser Projekt erfolgreich mit der Vue-Benutzeroberfläche neu erstellt. Wie wir jedoch gesehen haben, sind die Erstellungs- und Konfigurationsprozesse einfacher und angenehmer, wenn wir eine grafische Benutzeroberfläche verwenden.

Abschluss

In diesem Tutorial haben wir gelernt, dass Vue CLI ein komplettes System für die moderne Webentwicklung ist. Es ermöglicht uns, schnell und einfach mit dem gesamten Vue-Ökosystem und Tools von Drittanbietern zu arbeiten. Natürlich müssen wir Vue CLI nicht für unsere Vue.js-Projekte verwenden. Dies ist völlig unsere Wahl. Wenn wir jedoch Geschwindigkeit und Qualität anstreben, hilft Ihnen Vue CLI bei der professionellen Erstellung, Verwaltung und Bereitstellung unserer Projekte.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.