Vue CLI 3: Ein Game Changer für die Frontend-Entwicklung

Vue-Schöpfer Evan You’s letzte Keynote der Konferenz erwähnte nicht viel über neue Funktionen für Vue und konzentrierte sich stattdessen fast ausschließlich auf Vue CLI 3.

Ein CLI-Tool ist ein bloßes Dienstprogramm, das Ihren Vue-Apps keine Funktionen direkt hinzufügt, also warum die Aufregung?

Der erstaunliche Anstieg der Popularität von Vue im vergangenen Jahr hat deutlich gemacht, worauf Entwickler bei einem Framework wirklich Wert legen: Leistung, Flexibilität und Benutzerfreundlichkeit.

Wie Sie sehen werden, ist Vue CLI 3 ein großer Schritt nach vorn in Bezug auf Flexibilität und Benutzerfreundlichkeit. Es bietet Ihrem Vue-Projekt sofortigen Zugriff auf die besten Build-Tools aus der Frontend-Welt und kombiniert sie nahtlos mit sinnvollen Standardeinstellungen. Gleichzeitig ermöglicht es eine einfache Konfiguration und Anpassung an Ihre spezifischen Anforderungen.

Um dies zu erreichen, hat Vue CLI 3 eine neue Plugin-basierte Architektur eingeführt, die von der vorlagenbasierten Architektur der Versionen 1 und 2 abweicht. Unter dieser neuen Architektur ist die Projektkonfiguration in unabhängige Plugins aufgeteilt, dh eines für TypeScript, eines für ESLint usw .

Hier sind einige Dinge, die Sie an Vue CLI 3 lieben werden:

  • Keine Bindung, da Plugins zu jedem Zeitpunkt im Entwicklungslebenszyklus hinzugefügt werden können
  • Zero-Config-Plugins ermöglichen es Ihnen, Zeit mit der Entwicklung anstatt mit der Konfiguration zu verbringen
  • Einfach aufrüstbar, da Konfiguration ohne „Auswerfen“ anpassbar
  • Ermöglicht Entwicklern, ihre eigenen Plugins und Voreinstellungen zu erstellen

Zu guter Letzt bringt Vue CLI 3 Sie sehr schnell von einer leeren Leinwand zu einem laufenden Server, sodass Sie mit nur einem einzigen Prototypen ein Projekt erstellen können .vue Datei.

Hinweis: Dieser Artikel wurde ursprünglich veröffentlicht hier im Vue.js-Entwicklerblog am 26.03.2018.

Plugin-Architektur

Die Basiskonfiguration für ein Vue CLI 3-Projekt ist Barebones Webpack und Babel. Alle zusätzlichen Funktionen können über hinzugefügt werden Plugins die die Projektkonfiguration auf eine oder mehrere der folgenden Arten verbessern:

  • Ändern der Webpack-Konfiguration (z. B. Hinzufügen eines neuen Loaders)
  • Ändern Paket.json (z. B. Hinzufügen eines Skripts)
  • Das Ändern anderer Dateien im Projektbaum (z. B. das Einfügen von Markups in index.html)

Zu den offiziellen Vue CLI 3-Plugins gehören Typescript, PWA, Vuex, Vue Router, ESLint, Unit-Tests und mehr. Diese Plugins bieten natürlich eine vorkonfigurierte Best-Practice-Konfiguration.

Plugins installieren

Die Installation eines Plugins in einem Vue CLI 3-Projekt kann über die interaktive Eingabeaufforderung erfolgen, die während der Projektinitialisierung bereitgestellt wird:

vc3_01.png

Sie können jedoch zusätzliche Plugins im Projekt installieren jederzeit in seinem Lebenszyklus mit dem CLI-Befehl vue add my-plugin. Das bedeutet, dass Sie nicht auf die Entscheidungen beschränkt sind, die Sie ganz am Anfang der Entwicklung treffen.

Wenn Sie einen bevorzugten Satz von Plugin-Einstellungen haben, die Sie für jedes Projekt verwenden möchten, z. B. Vuex, TypeScript und ESLint mit Airbnb-Konfiguration, können Sie mit Vue CLI 3 diese Einstellungen in einer lokal gespeicherten Voreinstellungsdatei speichern ~/.vuerc. Jetzt können Sie perfekt konfigurierte Projekte im Handumdrehen erstellen!

Webpaket

Der Elefant im Raum jeder Tooling-Software ist die Handhabung von Webpack.


Wenn Sie die Vue CLI 2 Webpack-Vorlagenkonfiguration zum ersten Mal überprüfen

Möglicherweise sind Sie erleichtert, wenn Sie Ihr erstes Vue CLI 3-Projekt installieren und feststellen, dass es keine gibt webpack.config.js im Projektstamm. Dies liegt daran, dass die meisten Projektkonfigurationen für Vue CLI 3 in Plugins abstrahiert und zur Laufzeit in die Basiskonfiguration zusammengeführt werden.

Das Anpassen der Webpack-Konfiguration kann über die neue view.config.js Datei. Wenn Sie beispielsweise ein Webpack-Plug-in hinzufügen möchten (nicht zu verwechseln mit einem Vue-CLI-Plug-in), ziehen Sie den erforderlichen Code in die Webpack konfigurieren Eigentum.

view.config.js

module.exports = {
  configureWebpack: {
    
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

Wenn Sie ausgefallener werden müssen, gibt es mehrere andere APIs, die von Vue CLI 3 für die Webpack-Konfiguration bereitgestellt werden, sodass Sie sie direkt mutieren oder die leistungsstarke verwenden können Webpack-Kette. Sie können mehr über die Webpack-Konfiguration in Vue CLI 3 lesen hier.

Hinweis: Die Webpack-Konfiguration ist auf Plugins aufgeteilt und möglicherweise view.config.js. Verwenden Sie den Befehl, um die Laufzeitkonfiguration anzuzeigen vue inspect.

Benutzerdefinierte Plugins

Plugins können ihre eigenen Konfigurationsoptionen bereitstellen, die durch die angegeben werden pluginOptions Eigentum von view.config.js. Wenn Sie zum Beispiel verwenden vue-cli-plugin-kritisch zum Extrahieren von kritischem CSS können Sie page width und height so was:

module.exports = {
  pluginOptions: {
    critical: {
      width: 375,
      height: 565    
    }
  }
}

Wenn Sie größere Änderungen an Ihrer Projektkonfiguration vornehmen oder dieselben Änderungen in mehreren Projekten wiederholen möchten, können Sie in Ihr eigenes benutzerdefiniertes Plugin abstrahieren. Sie können dies dann auf NPM veröffentlichen, wenn Sie es mit anderen Entwicklern teilen möchten.

Diese Art der Erweiterbarkeit war mit der vorlagenbasierten Architektur von Vue CLI 2 möglich, da Sie einfach eine der Vorlagen forken und Ihre Änderungen hinzufügen konnten. Dieses System hatte jedoch zwei schwerwiegende Engpässe:

  • Alle Upstream-Updates oder Fehlerkorrekturen müssten manuell in die gegabelte Vorlage eingefügt werden, was die Wartung mühsam macht.
  • Sie sind auf eine Vorlage pro Projekt beschränkt. Was ist, wenn es Funktionen aus mehreren Vorlagen gibt, die Sie in ein Projekt aufnehmen möchten? Am Ende müssen Sie Ihre eigenen Vorlagen mit jeder gewünschten Permutation und Kombination von Funktionen erstellen, was das vorherige Problem noch verschlimmert.

Aus diesen Gründen haben sich Vue CLI 2-Vorlagen von Drittanbietern nie wirklich durchgesetzt. Vue CLI 3 hat diese Einschränkungen eindeutig überwunden, daher prognostiziere ich, dass zusätzlich zu den offiziellen Plugins eine Menge cooler Plugins von Drittanbietern erscheinen werden.

Kein “Auswerfen”

“Auswerfen” ist eine Terminologie aus React-App erstellen und bezieht sich auf einen Prozess, bei dem alle Konfigurations- und Build-Abhängigkeiten aus dem Skriptordner (denken Sie an Plugins) verschoben und direkt in Ihr Projekt eingefügt werden.

Dies geschieht, um eine direkte Bearbeitung der Konfiguration zu ermöglichen. Es ist jedoch ein ziemlich unflexibles System, da es irreversibel ist und Sie daran hindert, Upgrades für die Skripte zu erhalten, selbst wenn Sie nur eines bearbeiten mussten.


Auswerfen aus der Create React App

Und hier ist die Krönung von Vue CLI 3: Die Flexibilität der Plugins und Konfigurations-APIs bedeutet, dass ein Vue CLI 3-Projekt nicht ausgeworfen werden muss. Daher bleiben Vue CLI 3-Projekte während ihres gesamten Lebenszyklus aktualisierbar.

Rapid-Prototyping

Wenn Sie wie ich sind, sind Sie manchmal von einer so coolen Idee beeindruckt, dass Sie alles andere fallen lassen und direkt mit dem Prototyping beginnen müssen. Aber wenn man dann noch eine halbe Stunde an Webpack- und Babel-Config rumbasteln muss, bevor man was auf den Bildschirm bekommt, verdirbt das wirklich die Laune.

Vue CLI 3 macht es unglaublich schnell, von Null auf eine bereitgestellte App zu wechseln. Es enthält einen Webpack-Dev-Server mit Hot-Modul-Neuladen und allen anderen Schnickschnack, die Sie erwarten würden.

Besser noch, wenn Vue CLI 3 global installiert ist, können Sie dienen .js oder .vue Dateien ohne lokale Abhängigkeiten. Dadurch können Sie etwa Folgendes tun:

echo '<template><h1>Hello!</h1></template>' > App.vue
vue serve

Und Sie haben sofort ein Vue-Projekt auf dem Bildschirm.


Verwenden Ansicht dienen zum ersten Mal

Fazit

Was ich hier behandelt habe, sind nur einige der neuen Funktionen in Vue CLI 3. Es gibt viele andere Leckereien wie:

  • Verwenden Sie Umgebungsvariablen in Ihrem Projekt durch a .env Datei.
  • Erstellen Sie mit dem Befehl ein Projekt als Webkomponente zur Verwendung in einem beliebigen anderen JavaScript-Projekt vue-cli-service build --target wc --name my-element [entry]
  • DLL-Modus Dadurch werden Ihre NPM-Abhängigkeiten in einem separaten Anbieterpaket erstellt, wodurch die Build-Zeit zukünftiger Builds verbessert wird

Und mehr. Vue CLI 3 befindet sich zum Zeitpunkt des Schreibens noch in der Beta-Phase, aber warum nicht gleich loslegen? es installieren oder Lesen der Dokumente.

Danke an Evan und das Team für ein weiteres fantastisches Tool.


Werden Sie 2020 Senior Vue-Entwickler.

Lernen und beherrschen Sie in unserem neuesten Kurs, was Profis über das Erstellen, Testen und Bereitstellen von Full-Stack-Vue-Apps wissen.

Mehr erfahren


Similar Posts

Leave a Reply

Your email address will not be published.