Schnellstart

Vue CLI ist das Cli-Tool der nächsten Generation, mit dem die Komplexität beim Erstellen einer Anwendung abstrahiert werden kann. Wenn Sie Ihre App mit Vue CLI starten, können Sie auch die offiziellen Webpack-Updates und Konfigurationsänderungen sowie die Updates von Vuetify ohne mühsamen Upgrade-Prozess abrufen.

Wenn Sie nicht schon ein neues Vue.js-Projekt mit der Vue CLI erstellt haben, können Sie dies mit folgenden Befehlen erledigen:

Jetzt haben Sie ein instanziiertes Projekt undd können die Vuetify Vue CLI Pakete mit Hilfe der CLI hinzufügen.

Vuetify kann auch über die Vue UI installiert werden, die neue grafische Anwendung für die Vue CLI. Stellen Sie sicher, dass Sie die neueste Version der Vue CLI installiert haben und geben Sie dann in Ihr Terminal folgende Befehle ein:

Dies startet das Vue User Interface und öffnet ein neues Fenster in Ihrem Browser. Klicken Sie auf der linken Seite Ihres Bildschirms auf Plugins. Nach der Navigation suchen Sie nach Vuetify mit Hilfe des Eingabefeldes.

Vuetify kann mittels der Installation des Nuxt Vuetify Moduls hinzugefügt werden.

Nach der Installation aktualisieren Sie Ihre nuxt.config.js-Datei, um das Vuetify-Modul in den Build aufzunehmen.

Weitere Informationen zur Installation von Nuxt, finden Sie in der offiziellen Dokumentation.

Um Vuetify in einem Webpack-Projekt zu installieren, müssen Sie einige Abhängigkeiten hinzufügen:

Suchen Sie nach der Installation die Datei webpack.config.js und kopieren Sie das folgende Snippet in das rules-Array. Wenn Sie eine vorhandene sass-Regel konfiguriert haben, müssen Sie möglicherweise einige oder alle der folgenden Änderungen anwenden. Wenn Sie den vuetify-loader für das Treeshaking verwenden möchten, stellen Sie sicher, dass Sie eine Version >=4 von Webpack verwenden. Weitere Informationen zum Einrichten mit Webpack finden Sie auf der Seite A-la-carte.

Erstellen Sie eine Plugin-Datei für Vuetify, src/plugins/vuetify.js mit dem folgenden Inhalt:

Wenn Sie den vuetify-loader einsetzen, verwenden Sie diesen Inhalt:

Navigieren Sie zu Ihrem Haupteinstiegspunkt, in dem Sie Ihre Vue-Instanz instanziieren und das Vuetify-Objekt als Option übergeben.

Vuetify benutzt Google's Roboto font und Material Design Icons. Der einfachste Weg diese zu installieren ist, ihre CDN's in Ihrer Haupt-index.html einzubinden.

Um die Verwendung von Vuetify.js zu testen, ohne eine Vorlage von Vue CLI zu installieren, kopieren Sie den folgenden Code in Ihre index.html. Dadurch wird die neueste Version von Vue und Vuetify abgerufen, sodass Sie mit Komponenten spielen können. Sie können auch den Vuetify-Starter für Codepen verwenden. Obwohl dies nicht empfohlen wird, wird empfohlen, die Versionen Ihrer Assets zu erweitern, wenn Sie die CDN-Pakete in einer production-Umgebung verwenden müssen. Weitere Informationen hierzu finden Sie auf der Website jsdelivr.

Um Vuetify mit Electron zu verwenden, fügen Sie das electron-builder-Plugin über die Vue CLI hinzu.

Wenn Sie eine neue Anwendung mit der Vue CLI erstellen, haben Sie die Möglichkeit, in der ersten Eingabeaufforderung nach dem Starten von vue create my-app die Option **Progressive Web App (PWA) Support** auszuwählen. Dieses Paket kann auch in vorhandene Vue CLI-Projekte installiert werden, indem Sie den folgenden Befehl eingeben:

Um Vuetify mit Cordova zu verwenden, fügen Sie das Cordova-Plugin mittels der Vue CLI hinzu:

Um Vuetify mit Capacitor zu verwenden, fügen Sie das Capacitor-Plugin mittels der Vue CLI hinzu:

There are 2 ways we can use Vuetify with default vuepress theme. Either by registering vuetify as a plugin in vuepress .vuepress/enhanceApp.js file (code sample below), or by using vuetify directly from CDN: