Ausführliche Erläuterung der Verwendung des universellen Anwendungsframeworks Nuxt.js von Vue.js

Dieses Mal erkläre ich Ihnen ausführlich, wie Sie das universelle Anwendungsframework Nuxt.js von Vue.j verwenden Schauen wir uns die Fälle gemeinsam an.

1. Einleitung

Offizielle Website:

https://

nuxtjs.org/ GitHub: https://github.com/nuxt/nuxt.js

Was ist Nuxt.js?

Nuxt.js ist ein allgemeines Anwendungsframework, das auf Vue.js basiert.

Durch die Abstraktion der Organisation der Client/Server-Infrastruktur konzentriert sich Nuxt.js hauptsächlich auf das UI-Rendering der Anwendung.

Unser Ziel ist es, ein flexibles Anwendungsframework zu schaffen, mit dem Sie den Infrastrukturcode neuer Projekte initialisieren oder Nuxt.js in bestehenden

Node.js

-Projekten verwenden können. Nuxt.js legt verschiedene Konfigurationen vor, die zum Entwickeln servergerenderter Anwendungen mit Vue.js erforderlich sind.

Darüber hinaus stellen wir auch einen Befehl namens „nuxt generic“ bereit, der die Funktion zum Generieren entsprechender statischer Sites für Anwendungen basierend auf Vue.js bereitstellt.

Wir glauben, dass die durch diesen Befehl bereitgestellte Funktionalität einen neuen Schritt in Richtung Entwicklung von Webanwendungen darstellt, die verschiedene Mikrodienste integrieren.

Als Framework bietet Nuxt.js viele nützliche Funktionen für das typische Anwendungsarchitekturmuster von Client/Server, wie z. B. asynchrones Laden von Daten,

Middleware

-Unterstützung, Layout-Unterstützung usw.

2. Erstellen Sie das erste Nuxt.js-Projekt

Es wird empfohlen, die von Nuxt bereitgestellte Vorlage zu verwenden. Es wird davon ausgegangen, dass Sie vue-cli installiert haben. Wenn nicht, führen Sie bitte zuerst npm install vue-cli -g aus, um vue-cli zu installieren.

Gehen Sie zum Projektordner, um abhängige Pakete zu installieren.

$ vue init nuxt-community/starter-template <project-name>

cd <project-name>
npm install

Starten Sie das Projekt

.

Öffnen Sie den Browser und besuchen Sie http://localhost:3000. Sie können die von Next gerenderte Seite sehen.

npm run dev

3. Seite hinzufügen

Die neu abgeschlossene Projektstruktur ist wie folgt:

Projektstruktur

Nuxt stimmt zu, dass alle Seiten im Seitenordner abgelegt werden und Nuxt automatisch die entsprechende Route gemäß der

Verzeichnisstruktur

generiert. Erstellen Sie nun unter „Seiten“ eine neue Vue-Datei „test.vue“ und besuchen Sie http://localhost:3000/test, um die Seite anzuzeigen, die Sie gerade hinzugefügt haben.

4. Einführung von Plug-ins von Drittanbietern

Normalerweise müssen wir Plug-Ins von Drittanbietern einführen, z. B. Front-End-Komponenten, Protokolle usw.

Der erste Schritt ist natürlich die Installation des Plug-Ins. Hier nehmen wir Element-UI als Beispiel.

Obwohl ich das Element-UI-Paket heruntergeladen habe, kann es nicht wie ein normales Projekt direkt in die Vue-Instanz importiert und verwendet werden. Die Kernel-Projekte von Nuxt befinden sich alle im .nuxt-Verzeichnis. Das Ändern der folgenden Dateien wird nicht wirksam. Da die Datei bei jeder Kompilierung neu generiert wird, ist eine direkte Änderung der Projektdatei ungültig.

npm install element-ui

Kernel-Projektstruktur

Obwohl es nicht direkt geändert werden kann, bietet Nuxt eine besondere Möglichkeit, Plug-Ins von Drittanbietern einzuführen.

Der erste Schritt besteht darin, eine neue js-Datei element-ui.js im Pulgin-Ordner zu erstellen. Der Inhalt der Datei ist wie folgt.

Der zweite Schritt besteht darin, nuxt.config.js zu ändern. Plugins-Attribut hinzufügen.

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

Nach der Neukompilierung kompiliert Nuxt das Drittanbieter-Plug-In und verwendet es. Derzeit kann das Drittanbieter-Plug-in in jeder Vue-Datei verwendet werden.

/**
   * include third-party plugin
   */
  plugins: ['~plugins/element-ui'] // element-ui.js文件地址

5. Statische Ressourcendateien

Sie können die statischen Ressourcendateien im statischen Ordner ablegen und dann http://localhost:3000/ verwenden, um auf die statischen Ressourcendateien zuzugreifen.

Nuxt bietet viele weitere Funktionen, wie z. B. dynamisches Routing und ESLint-Codeerkennung. Das war’s für heute. Ausführlichere Informationen finden Sie auf der offiziellen Website.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man das Bild in JS in der Mitte schweben lässt

Wie Webpack Electron-Anwendungen erstellt

Lösung für das Problem mit dem Angular-Bild-Upload-Vorschaupfad 

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung des universellen Anwendungsframeworks Nuxt.js von Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!