Nuxt.js: ein minimalistisches Framework zum Erstellen von Universal Vue.js -Apps

nuxt.js: Streamlining VUE.JS-Entwicklung mit serverseitigem Rendering und statischer Site-Generierung

Tauchen Sie in die Welt von Vue.js mit der umfassenden Vue.js -Buchsammlung von SitePoint Premium ein. Fundamentaldaten, praktische Projekte, wesentliche Tipps und Tools und vieles mehr für nur 14,99 US -Dollar/Monat freischalten!

Universal JavaScript (auch als isomorphes JavaScript bezeichnet) ermöglicht die Codeausführung sowohl auf dem Client als auch auf dem Server. Moderne JavaScript-Frameworks wie Vue.js erstellen häufig einseitige Anwendungen (SPAs) für erweiterte Benutzererfahrung und -geschwindigkeit. Spas können jedoch aufgrund von JavaScript -Bündeln und Crawler -Einschränkungen unter langsamen anfänglichen Ladezeiten und SEO -Herausforderungen leiden. Vorlastanwendungen (Server-Side-Rendering (SSR) auf einem Server, das gerendertes HTML direkt an den Browser sendet und diese Probleme behandelt.

SSR einrichten kann komplex sein. Nuxt.js vereinfacht diesen Prozess für VUE.js und automatisiert die Server-Seite-Rendering, Routing und andere Konfigurationen.

Schlüsselvorteile von nuxt.js:

• vereinfacht Vue.js Entwicklung: verarbeitet SSR, Routing und Konfigurationen automatisch.
• statische Site -Generierung: Erstellt statische Websites, die mit Jekyll vergleichbar sind, die SEO und die Leistung erhöhen.
• integrierte Unterstützung: integriert Vue Router, Vuex (optional), Vue Server-Renderer und Vue-Meta.
• Leicht und effizient: eine kleine Kerngröße beibehält (57 kb min gzip).
• Dynamisches Routing und statische Bereitstellung: Erstellt leicht dynamische Routen und statische Websites, die auf Plattformen wie Firebase bereitgestellt werden können.
• skalierbare Architektur: Geeignet für Projekte aller Größen.

Was ist nuxt.js?

nuxt.js ist ein Framework, das das Erstellen von servergerenderten VUE.JS-Anwendungen vereinfacht, indem komplexe Konfigurationen abtrahiert werden, die sich auf asynchrone Daten, Middleware und Routing beziehen. Es ist analog zu Angular Universal und Next.js für andere Frameworks. Der Hauptaugenmerk liegt auf der Rendern von UI, die Verwaltung der Client/Server -Verteilung hinter den Kulissen.

statische Site -Erzeugung mit nuxt.js:

nuxt.js 'generate Befehl ermöglicht die Erstellung statischer Websites und bietet Funktionen, die statischen Site -Generatoren wie Jekyll ähnlich sind.

nuxt.js unter der Haube:

Beyond Vue.js 2.0, Nuxt.js enthält Vue-Router, Vuex (Speicheroption), Vue Server-Renderer und Vue-Meta, wodurch die manuelle Konfiguration dieser Bibliotheken beseitigt wird. Webpack behandelt Bündelung, Code-Splitting und Minifikation.

nuxt.js Workflow:

Wenn ein Benutzer mit einer nuxt.js -App interagiert:

1. nuxtServerInit (falls definiert) aktualisiert den Store.
2. Middleware wird ausgeführt (global, layout, Seitenspezifisch).
3. dynamische Routen werden validiert (wenn validate() Methode vorliegt).
4. asyncData() und fetch() Laden Sie Daten für das serverseitige Rendering.
5. Die Seite wird mit den geladenen Daten gerendert.

Erstellen eines serverlosen statischen Blogs mit nuxt.js:

Dieser Abschnitt zeigt, dass das Erstellen eines einfachen statischen Blogs mit nuxt.js erstellt wird und Daten aus einer verspotteten JSON -Datei abgerufen wird (im Idealfall würde eine API verwendet). Ein grundlegendes Verständnis von Vue.js wird angenommen. Der komplette Code ist in GitHub [GitHub Link -Platzhalter] verfügbar, und eine Demo ist bei [Demo Link -Platzhalter] verfügbar.

Setup und Konfiguration:

1. Verwenden Sie das vue-cli, um ein neues Projekt zu erstellen: vue init nuxt/starter ssr-blog
2. Abhängigkeiten installieren: cd ssr-blog && npm install
3. Starten Sie die App: npm run dev
4. konfigurieren Sie nuxt.config.js, um eine Titelvorlage hinzuzufügen, und bulma CSS:
einbeziehen:

<code class="language-javascript">// ./nuxt.config.js
module.exports = {
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    link: [
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css' }
    ]
  },
  // ...
};</code>

Seitenlayouts:

layouts/default.vue Passen Sie die Datei <nuxt-link></nuxt-link> an, um ein benutzerdefiniertes Basislayout mit der Navigation mit <nuxt></nuxt> und der

-Komponente zu erstellen.

Seiten und Routen:

pages/index.vue Seiten (pages/about.vue,

) als Einzelfilmkomponenten erstellen. Nuxt.js verarbeitet automatisch das Routing.

Blog -Homepage:

pages/index.vue Die <posts></posts> -Komponente zeigt aktuelle Blog -Beiträge mit einer benutzerdefinierten components/Posts.vue -Komponente (befindet sich in posts.json). Blog -Postdaten werden aus

.

geladen Dynamische Routen:

pages/post/_id/index.vue Erstellen Sie dynamische Routen für einzelne Blog -Beiträge mithilfe der Struktur asyncData(). Die id -Methode holt den spezifischen Beitrag basierend auf dem Parameter

ab.

statische Dateigenerierung:

nuxt.config.js modifizieren Sie

, um statische Dateien für dynamische Routen zu generieren:

<code class="language-javascript">// ./nuxt.config.js
module.exports = {
  // ...
  generate: {
    routes(callback) {
      const posts = require('./posts.json');
      let routes = posts.map(post => `/post/${post.id}`);
      callback(null, routes);
    }
  }
};</code>

npm run generate Ausführen dist, um statische Dateien im Ordner

zu generieren.

FireBase -Bereitstellung:

Stellen Sie die statische Stelle mit der Firebase Cli auf Firebase Hosting ein.

Schlussfolgerung:

nuxt.js vereinfacht die Server-Seite-Rendering und die statische Site-Generierung für VUE.JS-Anwendungen, Verbesserung der Leistung und SEO. Die Funktionen und die Benutzerfreundlichkeit machen es zu einem leistungsstarken Werkzeug für verschiedene Projekte.

häufig gestellte Fragen (FAQs): (Dieser Abschnitt bleibt weitgehend unverändert, da er direkte Fragen zu Nuxt.js beantwortet)

(Der FAQS -Abschnitt aus der ursprünglichen Eingabe wird hier eingefügt)

Das obige ist der detaillierte Inhalt vonNuxt.js: ein minimalistisches Framework zum Erstellen von Universal Vue.js -Apps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!