Fermer

mars 18, 2019

un cadre minimaliste pour la création d'applications Universal Vue.js –


Vous voulez apprendre Vue.js à partir de la base? Obtenez une collection complète de livres Vue couvrant les bases, les projets, les astuces, les outils et plus avec SitePoint Premium. Inscrivez-vous maintenant pour seulement 9 dollars par mois ou essayez notre essai gratuit de 7 jours .

Le code JavaScript universel (ou isomorphe) est devenu très courant dans la communauté JavaScript. Il est utilisé pour décrire le code JavaScript pouvant s’exécuter à la fois sur le client et sur le serveur.

De nombreux frameworks JavaScript modernes, tels que Vue.js ont pour objectif de créer des applications à page unique. Ceci est fait pour améliorer l'expérience utilisateur et rendre l'application plus rapide, car les utilisateurs peuvent voir les mises à jour des pages instantanément. Bien que cela présente de nombreux avantages, il présente également quelques inconvénients, tels qu'un long délai de création du contenu lors du chargement initial de l'application lorsque le navigateur récupère l'ensemble JavaScript, et que certains robots des moteurs de recherche ou robots de réseau social ne le sont pas. voir l'intégralité de l'application chargée lors de l'exploration de vos pages Web.

Le rendu JavaScript côté serveur consiste à précharger des applications JavaScript sur un serveur Web et à envoyer du code HTML rendu en réponse à une demande du navigateur pour une page.

Création d'un serveur les applications JavaScript rendues à l’extérieur peuvent être un peu fastidieuses, car beaucoup de configuration doit être faite avant même de commencer à coder. C’est le problème que Nuxt.js a pour objectif de résoudre pour les applications Vue.js.

Qu'est-ce que Nuxt.js

? En bref, Nuxt.js est un cadre qui vous aide à créer une vue serveur. Applications .js facilement. Il résume l'essentiel de la configuration complexe impliquée dans la gestion d'éléments tels que les données asynchrones, les intergiciels et le routage. Il est similaire à Angular Universal pour Angular et Next.js pour React .

Selon selon [NU]. js docs "son principal domaine d'application est le rendu de l'interface utilisateur tout en faisant abstraction de la distribution client / serveur."

Génération statique

Une autre grande fonctionnalité de Nuxt.js est sa capacité à générer des sites Web statiques avec le . générer la commande . C'est assez cool et fournit des fonctionnalités similaires aux outils de génération statique populaires tels que Jekyll .

Sous le capot de Nuxt.js

En plus de Vue.js 2.0, Nuxt.js comprend les éléments suivants: Vue-Router Vuex (inclus uniquement avec l'option de magasin ), Vue Server Renderer et vue-meta . C’est formidable, car cela évite d’inclure et de configurer manuellement les différentes bibliothèques nécessaires au développement d’une application Vue.js rendue par le serveur. Nuxt.js fait tout cela hors de la boîte, tout en maintenant une taille totale de 57kB min + gzip (60KB avec vuex).

Nuxt.js utilise également webpack avec vue-loader et babel-loader pour lier, scinder le code et réduire le code.

Fonctionnement

C’est ce qui se produit lorsqu'un utilisateur visite un Nuxt.js app ou accède à l'une de ses pages via :

  1. Lorsque l'utilisateur visite initialement l'application, si l'action nuxtServerInit est définie dans le magasin, Nuxt.js l'appellera et mettre à jour le magasin.
  2. Ensuite, il exécute tout middleware existant existant pour la page visitée. Nuxt vérifie d'abord le fichier nuxt.config.js pour le middleware global, puis vérifie le fichier de présentation correspondant (pour la page demandée), puis vérifie le middleware de la page et de ses enfants. Les middleware sont classés par ordre de priorité dans cet ordre.
  3. Si l'itinéraire visité est un itinéraire dynamique et qu'il existe une méthode validate () l'itinéraire est validé .
  4. Ensuite, Nuxt.js appelle les méthodes asyncData () et fetch () pour charger des données avant d'afficher la page. La méthode asyncData () est utilisée pour extraire des données et les restituer côté serveur, tandis que la méthode fetch () est utilisée pour remplir le magasin avant. rendu de la page.
  5. À la dernière étape, la page (contenant toutes les données appropriées) est rendue.

Ces actions sont décrites correctement dans ce schéma, extrait des documents Nuxt:

. js Schema "title =" Schéma Nuxt.js "/></p data-recalc-dims=

Création d'un site statique sans serveur avec Nuxt.js

Mettons-nous au courant avec du code et créons un simple blog généré de manière statique avec Nuxt.js. We ' Nous supposerons que nos publications sont extraites d'une API et se moquent de la réponse avec un fichier JSON statique.

Pour bien suivre, une bonne connaissance de Vue.js est nécessaire. Vous pouvez consulter l'excellent Jack Franklin . ] guide de mise en route pour Vue.js 2.0, si vous débutez dans le framework. J'utiliserai également la syntaxe ES6, et vous pourrez vous rafraîchir la mise à jour. R sur cela ici: sitepoint.com/tag/es6/ .

Notre dernière application ressemblera à ceci:

Nuxt SSR Blog "title =" Nuxt SSR Blog "/></p data-recalc-dims=

Le code complet de cet article est visible ici sur GitHub et vous pouvez consulter la démonstration ici .

Configuration et configuration de l'application

La méthode la plus simple démarrer avec Nuxt.js, c'est utiliser le modèle créé par l'équipe Nuxt. Nous pouvons l’installer rapidement dans notre projet ( ssr-blog ) à l’aide du vue-cli :

 vue initiale / débutant ssr-blog

Une fois cette commande exécutée, une invite s’ouvrira et vous posera quelques questions. Vous pouvez appuyer sur Retour pour accepter les réponses par défaut ou saisir vos propres valeurs.

Remarque: Si vous n'avez pas installé vue-cli, vous devez exécuter npm. installez -g @ vue / cli d'abord pour l'installer.

Ensuite, nous installons les dépendances du projet:

 cd ssr-blog
npm installer

Nous pouvons maintenant lancer l'application:

 npm run dev

Si tout se passe bien, vous devriez pouvoir visiter le site http: // localhost: 3000 pour afficher la page de démarrage du modèle Nuxt.js. Vous pouvez même voir le source de la page pour voir que tout le contenu généré sur la page a été rendu sur le serveur et envoyé au navigateur en tant que HTML.

Ensuite, nous pouvons faire quelques configurations simples dans le fichier nuxt.config. fichier js . Nous allons ajouter quelques options:

 // ./nuxt.config.js

module.exports = {
  / *
   * En-têtes de la page
   * /
  tête: {
    titleTemplate: '% s | Super Blog JS SSR ',
    // ...
    lien: [
      // ...
      {
        rel: 'stylesheet',
        href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css'
      }
    ]
  },
  // ...
}

Dans le fichier de configuration ci-dessus, nous spécifions simplement le modèle de titre à utiliser pour l'application via l'option titleTemplate . La définition de l'option title dans les pages individuelles ou les mises en page injectera la valeur title dans l'espace réservé % s dans titleTemplate avant d'être rendue.

Nous avons également utilisé mon cadre de choix CSS actuel, Bulma pour tirer parti de certains styles prédéfinis. Cela a été fait via l'option link .

Remarque: Nuxt.js utilise vue-meta pour mettre à jour les en-têtes et les attributs HTML de nos applications. Vous pouvez donc y jeter un coup d'œil pour mieux comprendre comment les en-têtes sont définis.

Nous pouvons maintenant passer aux étapes suivantes en ajoutant les pages et les fonctionnalités de notre blog.

Utilisation des mises en page

Premièrement, nous allons définir une disposition de base personnalisée pour toutes nos pages. Nous pouvons étendre la mise en page principale Nuxt.js en mettant à jour le fichier layouts / default.vue :

Dans notre présentation de base personnalisée, nous ajoutons l’en-tête de navigation du site. Nous utilisons le composant pour générer des liens vers les itinéraires que nous souhaitons avoir sur notre blog. Vous pouvez consulter la documentation sur pour voir comment cela fonctionne.

Le composant est très important lors de la création d'une mise en page, car il affiche le composant de page.

Il est également possible de faire plusieurs choses – comme définir des modèles de document personnalisés et des dispositions d'erreur – mais nous n'en avons pas besoin pour notre simple blog. Je vous exhorte à consulter la Nuxt.js documentation sur les vues pour connaître toutes les possibilités.

Les pages simples et les routes

Les pages du fichier Nuxt.js sont créées sous la forme de composants de fichier unique . dans le répertoire de pages . Nuxt.js transforme automatiquement chaque fichier .vue de ce répertoire en un chemin d'application.

Création de la page d'accueil du blog

Nous pouvons ajouter notre page d'accueil de blog en mettant à jour le index.vue . ] fichier généré par le modèle Nuxt.js dans le répertoire pages:

Comme indiqué précédemment, spécifier l'option title ici injecte automatiquement sa valeur dans la valeur titleTemplate avant d'afficher la page.

Nous pouvons maintenant recharger notre application pour afficher les modifications.

Construction de la page À propos de

Un autre avantage important de Nuxt.js est qu’il écoutera les modifications de fichiers dans le répertoire de pages . Il n’est donc pas nécessaire de redémarrer l’application lors de l’ajout. nouvelles pages.

Nous pouvons le vérifier en ajoutant un simple about.vue page:

Nous pouvons maintenant visiter http: // localhost: 3000 / about pour voir la page à propos, sans devoir redémarrer l'application, ce qui est génial.

Affichage des articles de blog sur la page d'accueil [19659010] Notre page d'accueil actuelle est relativement dépouillée, nous pouvons donc l'améliorer en affichant les articles de blog récents. Pour ce faire, nous allons créer un composant et l'afficher dans la page index.vue .

Mais nous devons d'abord récupérer nos articles de blog JSON sauvegardés et les placer dans un fichier dans le dossier racine de l'application. Le fichier peut être téléchargé à partir d'ici ou vous pouvez simplement copier le JSON ci-dessous et l'enregistrer dans le dossier racine sous le nom posts.json :

 [
    {
        "id": 4,
        "title": "Création d'applications JS universelles avec Nuxt.js",
        "summary": "Découvrez Nuxt.js et créez de superbes applications SSR avec Vue.js.",
        "content": "
 Lorem ipsum dolor sit amet, consectetur elit adipiscing, fait une incursion temporelle dans le travail et la magnitude de la vie. D’une manière minimale, l’exercice de la profession, l’exercice physique et la pratique du travail ainsi que de l’exercice qui en découle. aute irure dolor pariat. Excepteur sint occidenat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 ",
        "auteur": "Jane Doe",
        "publié": "08:00 - 07/06/2017"
    },
    {
        "id": 3,
        "title": "Grands cas d'utilisation de SSR",
        "summary": "Voir les applications JavaScript simples et riches rendues par le serveur.",
        "content": "
 Lorem ipsum dolor sit amet, consectetur elit adipiscing, a fait son premier choix, mais il a perdu beaucoup de temps, mais il a perdu beaucoup de temps. sunt in culpa qui officia deserunt mollit anim id est laborum. 
 ",
        "auteur": "Jane Doe",
        "publié": "17:00 - 06/06/2017"
    },
    {
        "id": 2,
        "title": "SSR in Vue.js",
        "summary": "En savoir plus sur la SSR dans Vue.js et sur les endroits où Nuxt.js peut accélérer le processus.",
        "content": "
 Lorem ipsum dolor sit amet, consectetur elit adipiscing, fait une incursion temporelle dans le travail et dolore magna aliqua. Ut enim ad minim veniam, qui exerce notre métier, et qui exerce son activité dans les années à venir. nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 ",
        "auteur": "Jane Doe",
        "publié": "13:00 - 06/06/2017"
    },
    {
        "id": 1,
        "titre": "Introduction à la SSR",
        "summary": "En savoir plus sur la SSR en JavaScript et comment elle peut être super cool.",
        "content": "
 Lorem ipsum dolor sit amet, consectetur elit adipiscing, fait une incursion temporelle dans le travail et la magnitude de la vie. D’une manière minimale, l’exercice de la profession, l’exercice physique et la pratique du travail ainsi que de l’exercice qui en découle. aute irure dolor. Excepteur sint occasion cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 ",
        "auteur": "John Doe",
        "publié": "11:00 - 06/06/2017"
    }
]

Remarque: Idéalement, les messages devraient être extraits d'une API ou d'une ressource. Par exemple, Contentful est un service qui peut être utilisé à cet effet.

Les composants résident dans le répertoire components . Nous allons créer le composant à fichier unique dans:

Nous importons les données de posts du fichier JSON sauvegardé et les affectons à la valeur posts de notre composant. Nous parcourons ensuite tous les articles du modèle de composant avec la directive v-for et affichons les attributs que nous souhaitons.

Remarque: le symbole ~ est un symbole alias pour le répertoire / . Vous pouvez consulter la documentation ici pour connaître les différents alias fournis par Nuxt.js et les répertoires auxquels ils sont liés.

Ensuite, nous ajoutons le composant à la page d'accueil. :

Ajout d'itinéraires dynamiques

Nous allons maintenant ajouter des itinéraires dynamiques aux articles afin que nous puissions accéder à un article par exemple avec l'URL suivante: / post / 1 .

Pour ce faire, nous ajoutons le répertoire post au répertoire pages et le structurons comme suit:

 pages
└── poster
    Id _id
        └── index.vue

Ceci génère les routes dynamiques correspondantes pour l'application, comme suit:

 routeur: {
  itinéraires: [
    // ...
    {
      name: 'post-id',
      path: '/post/:id',
      component: 'pages/post/_id/index.vue'
    }
  ]
}

Mise à jour du fichier unique:

Nuxt.js ajoute des méthodes personnalisées à nos composants de page pour faciliter le processus de développement. Voyez comment nous en utilisons certains sur la page d'un seul article:

  • Validez le paramètre de route avec la méthode validate . Notre méthode validate vérifie si le paramètre de route transmis est un nombre. S'il renvoie false Nuxt.js chargera automatiquement la page d'erreur 404. Vous pouvez en lire plus à ce sujet ici .
  • La méthode asyncData est utilisée pour extraire des données et les restituer côté serveur avant d'envoyer une réponse au navigateur. Il peut renvoyer des données via différentes méthodes. Dans notre cas, nous utilisons une fonction de rappel pour renvoyer la publication qui a le même attribut id que le paramètre route id . Vous pouvez voir les différentes manières d’utiliser cette fonction ici .
  • Comme nous l’avons déjà vu, nous utilisons la méthode head pour définir les en-têtes de page. Dans ce cas, nous remplaçons le titre de la page par le titre de l'article et ajoutons le résumé de l'article en tant que méta-description pour la page.

Nous pouvons à nouveau visiter notre blog pour voir tous les itinéraires et toutes les pages fonctionnels. correctement, et affichez également le code source de la page pour voir le code HTML généré. Nous avons une application JavaScript fonctionnelle rendue par le serveur.

Génération de fichiers statiques

Nous pouvons ensuite générer les fichiers HTML statiques de nos pages.

Nous devrons toutefois apporter quelques modifications mineures, comme par défaut Nuxt. .js ignore les itinéraires dynamiques. Pour générer les fichiers statiques pour les itinéraires dynamiques, nous devons les spécifier explicitement dans le fichier ./ nuxt.config.js .

Nous utiliserons une fonction de rappel pour renvoyer la liste de nos itinéraires dynamiques. :

 // ./nuxt.config.js

module.exports = {
  // ...
  produire: {
    itinéraires (rappel) {
      const posts = require ('./ posts.json')
      let routes = posts.map (post => `/ post / $ {post.id}`)
      rappel (null, routes)
    }
  }
}

Vous pouvez vérifier ici ici pour une documentation complète sur l'utilisation de la propriété generate .

Pour générer tous les itinéraires, exécutez cette commande:

 npm run produire

Nuxt enregistre tous les fichiers statiques générés dans un dossier dist .

Déploiement sur l'hébergement Firebase

Enfin, nous pouvons tirer parti de l'hébergement de Firebase . rendre notre site Web statique en direct dans quelques minutes. Cette étape suppose que vous ayez un compte Google.

Commencez par installer la CLI de Firebase, si vous ne l’avez pas déjà:

 npm install -g firebase-tools

Pour connecter votre ordinateur local à votre compte Firebase et obtenir un accès à vos projets Firebase, exécutez la commande suivante:

 connexion à Firebase

Cela devrait ouvrir une fenêtre du navigateur et vous inviter à vous connecter. Une fois que vous êtes connecté, visitez le site https://console.firebase.google.com et cliquez sur Ajouter un projet . Faites les choix appropriés dans l'assistant qui s'ouvre.

Une fois le projet créé, accédez à la page d'hébergement du projet à l'adresse https://console.firebase.google.com/project/ / hosting . ] et terminez l'assistant Démarrez

Ensuite, sur votre PC, à la racine du répertoire de votre projet, exécutez la commande suivante:

 firebase init

Dans l'assistant qui apparaît, sélectionnez “Hébergement”. Ensuite, sélectionnez votre projet nouvellement créé dans la liste des options. Choisissez ensuite le répertoire dist en tant que répertoire public. Sélectionnez cette option pour configurer la page en tant qu'application d'une page, puis sélectionnez «Non» lorsqu'il vous est demandé si vous souhaitez écraser dist / index.html .

Firebase écrira quelques fichiers de configuration dans votre projet. , puis mettez le site Web en direct à l'adresse https: // .firebaseapp.com . L'application de démonstration de cet article peut être consultée à l'adresse suivante: nuxt-ssr-blog.firebaseapp.com .

Si vous rencontrez des problèmes, vous trouverez des instructions complètes sur La page de démarrage rapide de Firebase .

Conclusion

Dans cet article, nous avons appris à tirer parti de Nuxt.js pour créer des applications JavaScript rendues par le serveur avec Vue.js. Nous avons également appris à utiliser sa commande generate pour générer des fichiers statiques pour nos pages et les déployer rapidement via un service tel que Firebase Hosting.

Le framework Nuxt.js est vraiment génial. C’est même recommandé dans le fichier officiel de Vue.js SSR GitBook . Je suis vraiment impatient de l'utiliser dans davantage de projets de RSS et d'explorer toutes ses capacités.


Olayinka est un développeur autodidacte de logiciels complets de Lagos. Il passe son temps à gazouiller, à faire des recherches universitaires à prendre des photos, à concevoir et à écrire du code … Vous savez, les choses amusantes habituelles.

Le meilleur outil 2023 pour ta croissance Instagram !



Source link