Die Vue.js-CLI verstehen und verwenden

Die Vue.js CLI (Command Line Interface) ist ein leistungsstarkes Tool, das das Einrichten, Entwickeln und Verwalten von Vue.js-Projekten vereinfacht. Es bietet eine standardisierte und effiziente Möglichkeit, neue Projekte zu erstellen, Abhängigkeiten zu verwalten und Build-Einstellungen zu konfigurieren. In diesem Artikel werden die Funktionen der Vue CLI erläutert und gezeigt, wie Sie sie effektiv nutzen können.

Installieren von Vue CLI

Um die Vue CLI verwenden zu können, müssen Sie sie global auf Ihrem System installieren. Stellen Sie sicher, dass Sie Node.js und npm (Node Package Manager) installiert haben, und führen Sie dann den folgenden Befehl in Ihrem Terminal oder Ihrer Eingabeaufforderung aus:

npm install -g @vue/cli

Dieser Befehl installiert die Vue CLI global und macht den Befehl vue zum Erstellen und Verwalten von Vue.js-Projekten verfügbar.

Erstellen eines neuen Vue.js-Projekts

Wenn die Vue CLI installiert ist, können Sie ganz einfach ein neues Vue.js-Projekt erstellen, indem Sie den folgenden Befehl ausführen:

vue create my-vue-project

Sie werden aufgefordert, eine Voreinstellung für Ihr Projekt auszuwählen. Sie können aus der Standardvoreinstellung wählen, die Babel und ESLint enthält, oder manuell Funktionen wie Vue Router, Vuex und TypeScript auswählen. Für Anfänger wird empfohlen, die Standardvoreinstellung durch Drücken von Enter auszuwählen.

Grundlegendes zu Vue CLI-Voreinstellungen

Vue CLI bietet mehrere Optionen zum Konfigurieren Ihres Projekts über Voreinstellungen:

• Standardvorgabe: Enthält wichtige Tools wie Babel und ESLint. Geeignet für die meisten Projekte und ein guter Ausgangspunkt für Anfänger.
• Funktionen manuell auswählen: Ermöglicht Ihnen, bestimmte Funktionen wie Vue Router für das Routing, Vuex für die Statusverwaltung, TypeScript für die Typprüfung und mehr auszuwählen.

Projektstruktur

Sobald Ihr Projekt erstellt ist, sehen Sie eine standardmäßige Vue.js-Projektstruktur. Hier sind einige wichtige Ordner und Dateien:

• src: Enthält den Quellcode für Ihre Anwendung, einschließlich Komponenten, Ansichten und Stilen.
• public: Enthält statische Assets und die Datei index.html, die als Einstiegspunkt für Ihre Anwendung dient.
• src/main.js: Die Einstiegsdatei für Ihre Vue-Anwendung. Initialisiert die Vue-Instanz und mountet sie in das DOM.
• src/App.vue: Die Stammkomponente Ihrer Anwendung. Sie können diese Datei anpassen, um das Hauptlayout Ihrer App zu definieren.
• src/components: Enthält Vue-Komponenten. Sie können hier neue Komponenten hinzufügen und in Ihre Anwendung importieren.

Ausführen des Entwicklungsservers

Um Ihre Vue.js-Anwendung in Aktion zu sehen, starten Sie den Entwicklungsserver, indem Sie den folgenden Befehl ausführen:

npm run serve

Dadurch wird ein lokaler Server unter http://localhost:8080 (oder einem anderen verfügbaren Port) gestartet. Öffnen Sie diese URL in Ihrem Browser, um Ihre Anwendung anzuzeigen.

Bauen für die Produktion

Wenn Sie bereit sind, Ihre Anwendung bereitzustellen, müssen Sie sie für die Produktion erstellen. Führen Sie den folgenden Befehl aus, um einen produktionsbereiten Build zu erstellen:

npm run build

Dieser Befehl generiert optimierte und minimierte Dateien im Ordner dist, die Sie auf Ihrem Webserver bereitstellen können.

Verwenden von Vue CLI-Plugins

Vue CLI unterstützt Plugins, die Ihrem Projekt Funktionen und Fähigkeiten hinzufügen. Um ein Plugin zu installieren, führen Sie den folgenden Befehl aus:

vue add 

Um beispielsweise Vue Router zu Ihrem Projekt hinzuzufügen, führen Sie Folgendes aus:

vue add router

Um ein Plugin zu entfernen, verwenden Sie den Befehl vue remove:

vue remove router

Plugins können auch über die Datei vue.config.js oder durch Ändern der Projektkonfiguration installiert und verwaltet werden.

Anpassen der Vue CLI-Konfiguration

Sie können die Konfiguration von Vue CLI anpassen, indem Sie die Datei vue.config.js im Stammverzeichnis Ihres Projekts erstellen oder ändern. Mit dieser Datei können Sie verschiedene Einstellungen wie Proxy-Konfigurationen, öffentliche Pfade und mehr anpassen.

module.exports = {
  devServer: {
    proxy: 'http://api.example.com'
  },
  publicPath: '/my-app/'
};

Abschluss

Die Vue.js CLI ist ein leistungsstarkes Tool, das das Erstellen, Verwalten und Konfigurieren von Vue.js-Projekten vereinfacht. Mithilfe der Vue CLI können Sie schnell ein neues Projekt einrichten, einen Entwicklungsserver ausführen, für die Produktion erstellen und Ihr Projekt mit Plug-Ins und Konfigurationsoptionen anpassen. Mit diesen Funktionen sind Sie bestens gerüstet, um mit der Entwicklung moderner, dynamischer Webanwendungen mit Vue.js zu beginnen.