Comment rendre des applications Vue sur un serveur utilisant Nuxt

Découvrez comment démarrer facilement le rendu d'applications construites avec Vue sur un serveur afin d'améliorer les performances de vos applications avec Nuxt.js.

En tant qu'un des frameworks / bibliothèques JavaScript largement utilisés de nos jours, Vue.js offre une expérience utilisateur impressionnante. en rendant dynamiquement le contenu de la page sans nécessairement envoyer une requête au serveur à chaque fois.

Aussi rapide que puisse être le rendu du contenu de Vue.js, il faut pas mal de temps avant que le site Web ne se développe définitivement. rendu, car il contient beaucoup de contenu nécessaire à la construction de la page.

Avec Nuxt.js, vous pouvez facilement précharger le contenu sur le serveur Web et afficher le code HTML en réponse à une demande du navigateur pour une page. Cela améliorera en fin de compte le «délai de création du contenu» lors du chargement d'une application.

Dans cet article, nous allons examiner certains des concepts de base de la création d'applications à l'aide de Nuxt.js et créer un site statique simple dans le processus.

Le rendu côté serveur est une solution astucieuse pour améliorer les performances de rendu des pages dans toutes les applications, en particulier celles qui fonctionnent avec Vue.js. Il n’est donc plus nécessaire d’envoyer une requête au serveur et de recréer des pages ne contenant pas de contenu dynamique – par exemple, une page contactez-nous . Un serveur peut créer cette page une fois et la mettre en cache pour une utilisation future.

Cela améliorera évidemment la vitesse de rendu des pages, aussi subtile soit-il.

Nuxt.js simplifie la développement des applications Vue.js. L'un de ses principaux objectifs est la création d'applications universelles. J'entends par là des applications également rendues sur le serveur. Nuxt.js ne remplace pas les bibliothèques côté serveur telles que Express; ce n'est pas un framework côté serveur. Cela nous permet simplement de pré-afficher des vues à la volée depuis le serveur.

Un autre point à noter est la configuration des itinéraires, quelle que soit l'échelle de votre application. Vous pouvez simplement créer un fichier pour une page et Nuxt.js configurera automatiquement l'itinéraire pour que vous puissiez naviguer et voir le fichier nouvellement créé dès sa sortie de la boîte. Nous verrons cela plus tard dans le didacticiel.

Nuxt.js s'appuie sur Vue, et vous pouvez toujours écrire et structurer vos applications de la même manière que vous le feriez lors de la création d'une application Vue.js typique.

A Une connaissance de base de JavaScript et de Vue est requise pour ce tutoriel. Assurez-vous également que Node.js NPM et Vue CLI sont installés sur votre ordinateur.

Si vous n'avez pas encore t déjà téléchargé la CLI de Vue, utilisez cette commande pour l’installer globalement sur votre machine:

Ensuite, pour commencer à créer une application Nuxt.js, exécutez la commande suivante pour utiliser l'interface de ligne de commande pour échafauder un nouveau projet nommé fictional-store sur votre terminal:

Modifiez le répertoire dans le projet nouvellement créé et installez toutes ses dépendances:

Si vous obtenez cette erreur compilée affichée dans la console:

Vous pouvez la réparer en ouvrant ./nuxt.config.js et en remplaçant le build {} objet avec: