Wo sind die Befehle für mehrseitige Vue-Frontend-Projekte?

Vue ist ein beliebtes JavaScript-Framework, das häufig zur Entwicklung von Front-End-Webanwendungen verwendet wird. Vue verfügt über eine programmierbare und erweiterbare Architektur, was es zu einer der ersten Wahlen unter Entwicklern macht. Vue bietet außerdem viele Funktionen und APIs, die Entwicklern helfen, die Entwicklung ihrer Projekte zu beschleunigen.

In Vue können Sie wählen, wie Sie als Single-Page-Anwendung (SPA) oder als Multi-Page-Anwendung (MPA) entwickeln möchten. Für SPA benötigen Sie nur eine Eintragsdatei und eine Routendatei, um die Anwendung zu implementieren, aber für MPA benötigen Sie mehrere Eintragsdateien und mehrere Routendateien, um die gesamte Anwendung zu erstellen. In diesem Artikel besprechen wir, wo sich die Befehle für mehrseitige Vue-Frontend-Projekte befinden.

Erstellen wir zunächst ein einfaches mehrseitiges Vue-Projekt. Nehmen wir an, wir möchten ein Projekt namens „my-multiple-page-app“ erstellen. Bitte führen Sie den folgenden Befehl aus:

vue create my-multiple-page-app

Dieser Befehl erstellt ein Projekt mit den Standardoptionen und -konfigurationen von Vue. Diese Methode funktioniert gut für einseitige Anwendungen, aber für mehrseitige Anwendungen müssen wir die Standardkonfiguration ändern. Wir müssen einige Konfigurationen ändern, um für jede Seite eine separate Seite zu generieren.

Zuerst müssen wir ein Plugin namens „vue-cli-plugin-multi-page“ installieren. Dieses Plugin hilft uns bei der Erstellung mehrseitiger Anwendungen. Bitte führen Sie den folgenden Befehl in der Befehlszeile aus:

vue add multi-page

Dieser Befehl installiert „vue-cli-plugin-multi-page“ für unser Projekt. Während dieses Vorgangs erstellt das Plugin einen Ordner mit dem Namen „pages“ im Stammverzeichnis des Projekts. Innerhalb dieses Ordners wird für jede Seite ein Ordner erstellt, und dann werden in jedem Seitenordner eine JavaScript-Datei mit dem Namen „main.js“ und eine Vue-Datei mit dem Namen „App.vue“ erstellt.

Die Datei „main.js“ ist die Eintragsdatei für jede Seite. In dieser Datei definieren wir die Routing- und Rendering-Einträge für jede Seite. In der Datei „App.vue“ organisieren wir die Struktur und den Stil der Seite.

Als nächstes müssen wir einige Konfigurationen ändern, damit das Vue-Build-Tool weiß, dass wir eine mehrseitige Anwendung erstellen. Öffnen Sie die Datei „vue.config.js“ im Stammverzeichnis und fügen Sie den folgenden Code hinzu:

module.exports = {
  pages: {
    index: {
      entry: 'src/pages/index/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    },
    login: {
      entry: 'src/pages/login/main.js',
      template: 'public/login.html',
      filename: 'login.html'
    },
    signup: {
      entry: 'src/pages/signup/main.js',
      template: 'public/signup.html',
      filename: 'signup.html'
    }
  }
}

Dieser Code teilt dem Vue-Build-Tool mit, dass wir drei Seiten erstellen werden: Startseite, Anmeldeseite und Registrierungsseite. Jede Seite verfügt über eine Eintragsdatei und eine HTML-Vorlagendatei. Wir definieren außerdem einen Dateinamen für jede Seite.

Führen Sie abschließend den folgenden Befehl aus, um unsere mehrseitige Anwendung zu kompilieren:

npm run build

Dieser Befehl generiert die kompilierten Dateien im Ordner „dist“. Im Ordner „dist“ sehen wir einen Ordner mit drei HTML-Dateien mit den Namen „index.html“, „login.html“ und „signup.html“. Jede HTML-Datei ist mit JavaScript-Dateien namens „chunk-vendors.js“ und „chunk-common.js“ sowie einer JavaScript-Datei namens „app.js“ verknüpft.

Hier geht es darum, wo sich die Befehle für mehrseitige Vue-Frontend-Projekte befinden. Vue bietet viele Funktionen und APIs, um Entwicklern dabei zu helfen, die Projektentwicklung zu beschleunigen. Mit diesen Befehlen können wir schnell eine mehrseitige Anwendung erstellen und bei Bedarf Änderungen vornehmen und warten.

Das obige ist der detaillierte Inhalt vonWo sind die Befehle für mehrseitige Vue-Frontend-Projekte?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!