Nuxt bietet eine unglaubliche Entwicklererfahrung, mit vielen integrierten Best Practices für Leistung und Anwendungsaufbau. In den letzten Versionen haben sie daran gearbeitet, diese Entwicklererfahrung auf die nächste Stufe zu heben, mit einigen neueren Funktionen, die Entwicklerprozesse beschleunigen und vereinfachen. Lassen Sie uns heute einige davon erkunden.
Ich habe ein Repository und eine Website für Sie eingerichtet, damit Sie einige dieser Funktionen erkunden können! Sie können sie hier einsehen
Nuxt Content
Sie müssen Nuxt nicht mehr mit einem externen Headless-CMS koppeln und die gesamte Einrichtung vornehmen, insbesondere wenn Sie nicht etwas in riesigem Maßstab suchen, sondern etwas Kleineres wie einen Blog. Nuxt Content bietet ein git-basiertes Headless-CMS, in dem Sie die Konfiguration in Markdown, CSV, YAML oder XML nach Ihrer Präferenz schreiben können. Es gibt einige Out-of-the-Box- Konfigurationseinstellungen, und das Schreiben benutzerdefinierter Konfigurationen ist so einfach wie das Erstellen einer Eigenschaft.
Was das für die Entwicklung bedeutet: Sie können statische Markdown-Dateien in einem Verzeichnis schreiben, und das kann Ihr Blog sein! Wir verwenden dieselbe dynamische Seiten-API, die Sie normalerweise in Nuxt verwenden würden, um diesen Inhalt zu generieren.
Es bietet auch eine sofort einsatzbereite Volltextsuche, was eine wunderbare Funktion ist, um sie so schnell zu einem Blog hinzuzufügen, ohne einen Drittanbieterdienst integrieren zu müssen.
Dieses Tutorial von Debbie O’Brien ist ein unglaubliches Leitfaden, es führt Sie durch jeden Schritt der Einrichtung, sehr empfehlenswert.
Nuxt Components
Eine Sache, die mir aufgefallen ist, war, dass ich immer und immer wieder Importcode in all meinen Komponenten tippte. Ich habe einige Snippets, um dies etwas schneller zu machen, aber das Hinzufügen in jede Datei unterbrach den Arbeitsfluss immer noch ein wenig.
Das Nuxt-Komponentenmodul scannt, importiert und registriert Komponenten, sodass wir dies nicht mehr tun müssen. Die Komponenten müssen sich im Komponentenverzeichnis befinden, aber wir können sie in Layouts, Seiten und Komponenten selbst verwenden.
Die Hinzufügung dieses Moduls ist eine kleine Änderung an unserer nuxt.config.js
export default {
components: true
}
Ernsthaft, das ist alles!
Wenn Sie eine tiefere Auseinandersetzung wünschen, bietet Ihnen dieser unglaublich umfassende Leitfaden von Kruite Patel alles, was Sie brauchen.
Wenn Sie die Komponente wiederholt verwenden, führt Nuxt einige nette Optimierungen durch, wie z. B. die automatische Erstellung eines gemeinsamen Chunks für die Komponente. Seien Sie jedoch bei großen Projekten vorsichtig, da dies die Build-Zeiten beeinträchtigen kann.
Nuxt Image
Nuxt Image ist ein neueres Modul, das nahtlose und schnelle Größenänderungen und Transformationen für optimierte responsive Bilder bietet. Sie können den integrierten Optimierer verwenden oder mit über 10 fertigen beliebten Anbietern wie Cloudinary oder Fastly arbeiten.
Der Code-Output aus der Verwendung ihrer API sind Standard-<img>- und <picture>-Tags, sodass es bei der Integration in Ihren Workflow keine Verschleierung gibt.
Nachdem Sie das Modul hinzugefügt haben, können Sie Konfigurationen zu den Bildern über eine Bilder-Eigenschaft in der nuxt.config.js hinzufügen und Breakpoints, Anbieter und andere Konfigurationen festlegen.
export default {
image: {
// The screen sizes predefined by `@nuxt/image`:
screens: {
xs: 320,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
xxl: 1536,
'2xl': 1536
},
// Generate images to `/_nuxt/image/file.png`
staticFilename: '[publicPath]/images/[name]-[hash][ext]',
domains: [
'images.unsplash.com'
],
alias: {
unsplash: 'https://images.unsplash.com'
}
}
}
Dies ist nur eine Auswahl einiger der verfügbaren Optionen, die als Beispiel dienen. Die vollständige Dokumentation finden Sie hier.
Und dann ist die Verwendung ähnlich wie bei jeder Vue-Komponente
<nuxt-img src="/nuxt-icon.png" />oder
<nuxt-picture src="/nuxt-icon.png" />Weitere Informationen und alle Optionen sind hier dokumentiert. Hut ab vor Ben Hong, dass er mich auf diese Möglichkeit aufmerksam gemacht hat. Er hat auch einige Nuxt-Ressourcen, die es wert sind, erkundet zu werden!
Beispiel-Repository
Ich habe ein Beispiel-Repository für Sie erstellt, um alle diese Funktionalitäten zu erkunden. Es ist ein kleiner Rezeptblog mit nuxt-content für die Rezepteinträge, Nuxt-Komponenten, damit ich keine Imports definieren musste, und nuxt-image für die Bildtransformationen.
Sie können es hier besuchen, um es in Aktion zu sehen, es zu forken, damit zu spielen und es zu Ihrem eigenen zu machen.
Sie können dort auch sehen, wie ich die $img API in Nuxt Image für Hintergrundbilder verwendet habe, was noch nicht vollständig dokumentiert ist.
Nuxt bietet eine unglaubliche Entwicklererfahrung. Nuxt bringt bald eine neue Version mit weiteren Updates heraus, die immer fachmännisch implementiert sind. Deshalb ist die Verwendung von Nuxt weiterhin eine solche Freude und erweist sich als großartiges Framework für Teams und Einzelentwickler gleichermaßen.