JavaScript: Vue.js CLI liegt in Version 3.0 vor

Das Werkzeug für das JavaScript-Framework Vue.js wurde komplett überarbeitet und bietet in der neuen Version ein erweitertes Plug-in-System.

In Pocket speichern vorlesen Druckansicht
JavaScript: Vue.js CLI liegt in Version 3.0 vor
Lesezeit: 3 Min.
Von
  • Björn Bohn

Vue CLI, das Werkzeug zum Erstellen von Build-Setups für Apps, die mit dem JavaScript-Framework Vue.js erstellt werden, ist in Version 3.0 erschienen. Das Tool hat im Gegensatz zur Vorgängerversion eine gründliche Überarbeitung erhalten und verfügt nun über ein erweitertes Plug-in-System, ein grafisches User-Interface sowie den sogenannten Modern Mode. Das Projekt hat eine lange Entwicklungsphase mit 16 Beta-Versionen und zwölf Release Candidates hinter sich.

Vue.js-Erfinder Evan You spricht in der Ankündigung von dem Wunsch, die Konfiguration zeitgemäßer Frontend-Toolings einfacher zu gestalten sowie Best Practices in der Toolchain zu berücksichtigen, da sie zum Standard für alle Vue-Applikationen werden soll. Im Kern bietet Vue CLI eine vorkonfiguriertes Build-Setup, das auf webpack 4 aufbaut und den initialen Konfigurationsaufwand entsprechend gering halten soll. Durch die Verbindung zu webpack bietet Vue CLI automatisch Features wie Hot Module Replacement, Code-Splitting, Tree-Shaking und Langzeit-Caching. Version 3.0 des CLI unterstützt außerdem PostCSS und auch alle anderen großen CSS-Prozessoren. Entwickler können mit dem Werkzeug ebenfalls HTML automatisch generieren – inklusive Hashed-Asset-Links.

Es ist außerdem möglich, eine optionale Integration für TypeScript, Progressive Web Apps oder die Werkzeuge Vue Router und Vuex hinzuzufügen. Damit geht Vue CLI einen Schritt weg von den bisher üblichen Vorlagen für Projekte, und ermöglicht Entwicklern ein eigenes Zusammenstellen von Plug-ins. Die Plug-in-Anleitung gibt Aufschluss darüber, wie Nutzer ihre eigenen Plug-ins für Vue CLI erstellen können.

Das Vue CLI verfügt in Version 3.0 über ein grafisches User Interface. Darin können Anwender nicht nur neue Projekte erstellen, sondern auch Plug-ins und Tasks innerhalb eines Projekts verwalten.

Das grafische Interface im Vue CLI

(Bild: Vue.js)

Vue CLI nutzt Babel, um die Sprach-Features von ECMAScript 2015 (und neuer) einsetzen zu können. Allerdings bedeutet dies auch, das Applikationen Bundles mitliefern müssen, um ältere Browser zu unterstützen, die oft schwerfälliger als nativer ES2015+-Code sind. Vue CLI 3.0 bietet mit dem Modern Mode eine Möglichkeit, dieses Problem zu umgehen. Wenn Entwickler eine App für die Produktion bereitstellen und das Kommando

vue-cli-service build --modern

nutzen, erstellt Vue CLI zwei Versionen einer App: ein "modernes" Bundle, das auf aktuelle Browser abzielt, und ein entsprechendes Legacy-Bundle für ältere Browser ohne ES-Module.

Mehr Infos

Workshop zu Vue.js

Am 13. September veranstaltet iX in Kooperation mit heise Events einen Einsteiger-Workshop zum Thema Vue.js in Hürth bei Köln. Weitere Informationen finden sich auf der Event-Website.

Wer Vue CLI 3.0 nutzen möchte, kann der Installationsanleitung in der Dokumentation folgen. Das Projekt findet sich auf GitHub.

Mehr dazu auf heise Developer:

(bbo)