Catégories
Plugin et site web

Outils utiles dans le développement Web Vue.js – Smashing Magazine

A propos de l'auteur

Développeur front-end basé à Lagos, au Nigeria. Il aime convertir des conceptions en code et créer des éléments pour le Web.
Plus à propos
Timi

Il existe des outils que les développeurs qui commencent tout juste avec Vue ou qui ont parfois de l'expérience dans la construction avec Vue ne savent parfois pas qu'ils existent pour rendre le développement dans Vue beaucoup plus facile. Dans cet article, nous allons examiner quelques-unes de ces bibliothèques, ce qu'elles font et comment les utiliser pendant le développement.

Lorsque vous travaillez sur un nouveau projet, certaines fonctionnalités sont nécessaires en fonction de la manière dont l'application est censée être utilisée. Par exemple, si vous stockez des données spécifiques à l'utilisateur, vous devrez gérer les authentifications, cela nécessitera la mise en place d'un formulaire qui doit être validé. Des choses telles que l'authentification et les validations de formulaires sont courantes; il existe des solutions qui correspondent éventuellement à votre cas d'utilisation.

Pour utiliser correctement votre temps de développement, il vaut mieux utiliser ce qui est disponible, au lieu d'inventer le vôtre.

En tant que nouveau développeur, il est possible que vous ne soyez pas au courant de tout ce que l’écosystème Vue vous offre. Cet article vous aidera avec cela; il couvrira certains outils utiles qui vous aideront à créer de meilleures applications Vue.

Remarque: Il existe des alternatives à ces bibliothèques et cet article ne place en aucun cas ces quelques-unes sur les autres. Ce ne sont que ceux avec lesquels j'ai travaillé.

Ce tutoriel s'adresse aux débutants qui viennent de commencer à apprendre sur Vue ou qui ont déjà des connaissances de base sur Vue. Tous les extraits de code utilisés dans ce didacticiel se trouvent sur mon GitHub.

Vue-notification

Pendant l'interaction de l'utilisateur, il est souvent nécessaire d'afficher un message de réussite, un message d'erreur ou des informations aléatoires à l'utilisateur. Dans cette section, nous allons voir comment afficher les messages et les avertissements à votre utilisateur à l'aide de vue-notification. Ce package fournit une interface avec une belle animation / transition pour afficher les erreurs, les informations générales et les messages de réussite à votre utilisateur dans votre application et il ne nécessite pas beaucoup de configuration pour être opérationnel.

Installation

Vous pouvez installer vue-notification dans votre projet en utilisant Yarn ou NPM selon le gestionnaire de packages de votre projet

Fil
yarn add vue-notification
npm
npm install --save vue-notification

Une fois l'installation terminée, la prochaine chose à faire serait de l'ajouter au point d'entrée de votre application, le main.js fichier.

main.js
//several lines of existing code in the file
    import Notifications from 'vue-notification'
    Vue.use(Notifications)
  

À ce stade, il suffit d'ajouter le composant notifications dans le App.vue fichier avant que nous puissions afficher les notifications dans notre application. La raison pour laquelle nous ajoutons ce composant à la App.vue est d'éviter la répétition dans notre application car quelle que soit la page sur laquelle l'utilisateur se trouve dans notre application, les composants dans App.vue (par exemple, les composants d'en-tête et de pied de page) seraient toujours disponibles. Cela prend la peine d'avoir à enregistrer le composant de notification dans chaque fichier dont nous avons besoin pour afficher une notification à l'utilisateur.

App.vue

Ici, nous ajoutons une instance de ce composant qui accepte un group prop qui serait utilisé pour regrouper les différents types de notifications que nous avons. En effet, le composant de notifications accepte un certain nombre d'accessoires qui dictent le comportement du composant et nous allons en examiner quelques-uns.

  1. group
    Cet accessoire est utilisé pour spécifier les différents types de notifications que vous pourriez avoir dans votre application. Par exemple, vous pouvez décider d'utiliser différents styles et comportements en fonction de l'objectif que la notification est censée servir, de la validation du formulaire, de la réponse de l'API, etc.
  2. type
    Cet accessoire accepte une valeur qui sert de «nom de classe» pour chaque type de notification que nous avons dans notre application et des exemples peuvent inclure success, error, et warn. Si nous utilisons l'un de ces types de notification, nous pouvons facilement styliser le composant en utilisant ce format de classe vue-notification + '.' + type, c'est à dire .vue-notification.warn pour warn, etc.
  3. duration
    Cet accessoire spécifie combien de temps le notification le composant doit apparaître avant de disparaître. Il accepte un nombre comme valeur dans ms et accepte également un nombre négatif (-1) si vous souhaitez qu'il reste sur l'écran de votre utilisateur jusqu'à ce qu'il clique dessus.
  4. position
    Cet accessoire est utilisé pour définir la position à partir de laquelle vous souhaitez que les notifications apparaissent dans votre application. Certaines des options disponibles sont top left, top right, top center, bottom right, bottom left, et bottom center.

Nous pouvons ajouter ces accessoires à notre composant dans App.vue donc ça ressemble maintenant à ceci;




Nous ajoutons également un style pour les différents types de notification que nous utiliserions dans notre application. Notez qu'à part group, nous pouvons passer chacun des accessoires restants à la volée chaque fois que nous voulons afficher une notification et cela fonctionnerait toujours en conséquence. Pour afficher une notification dans l'un de vos fichiers Vue, vous pouvez effectuer les opérations suivantes.

vueFile.vue
this.$notify({
  group: "demo",
  type: "error",
  text: "This is an error notification",
});

Ici, nous créons une notification de type error sous le group notification de demo. La propriété text accepte le message que vous souhaitez que la notification contienne et dans ce cas, le message est "Ceci est une notification d’erreur ». Voici à quoi ressemblerait la notification dans votre application.

vue-notification avec le type «erreur» en action
vue-notification en action: affichage de la notification d'erreur dans le navigateur. (Grand aperçu)

Vous pouvez découvrir les autres accessoires disponibles et d'autres moyens de configurer la notification sur la page officielle de la documentation.

Vuelidate

L'un des éléments les plus couramment utilisés sur le Web sont les éléments de formulaire (input(type='text'), input(type='email'), input(type='password'), et ainsi de suite) et il est toujours nécessaire de valider les entrées de l'utilisateur pour s'assurer qu'il envoie les bonnes données et / ou utilise le bon format dans le champ de saisie. Avec Vuelidate, vous pouvez ajouter une validation aux formulaires de votre application Vue.js, en gagnant du temps et en profitant du temps consacré à ce package. J'avais entendu parler de Vuelidate depuis un moment, mais j'étais un peu réticent à y jeter un coup d'œil car je pensais que ce serait trop complexe, ce qui signifiait que j'écrivais des validations à partir de zéro pour la plupart des champs de formulaire dans les applications sur lesquelles j'ai travaillé.

Lorsque j'ai finalement regardé les documents, j'ai découvert qu'il n'était pas difficile de commencer et que je pouvais valider mes champs de formulaire en un rien de temps et passer à la chose suivante.

Installation

Vous pouvez installer Vuelidate à l'aide de l'un des gestionnaires de packages suivants.

Fil
yarn add vuelidate
npm
npm install vuelidate --save

Après l'installation, la prochaine chose à faire serait de l'ajouter à la configuration de votre application dans le main.js afin que vous puissiez l'utiliser dans vos fichiers vue.

import Vuelidate from 'vuelidate'
Vue.use(Vuelidate)

En supposant que vous disposez d'un formulaire qui ressemble à ceci dans votre application;

vuelidate.vue


Maintenant, pour valider ce type de formulaire, vous devez d'abord décider du type de validation dont vous avez besoin pour chaque champ de formulaire. Par exemple, vous pouvez décider que vous avez besoin de la longueur minimale du fullName être 10 et l'âge minimum pour être 18.

Vuelidate est livré avec des validateurs intégrés dont nous n'avons besoin que de l'importer pour l'utiliser. Nous pouvons également choisir de valider le champ du mot de passe en fonction d'un format particulier, par exemple Password should contain at least a lower case letter, an upper case letter, and a special character. Nous pouvons écrire notre propre petit validateur qui fait cela et le brancher dans la liste du plugin de Vuelidate.

Allons-y étape par étape.

Utilisation de validateurs intégrés

Ici, nous importons quelques validateurs dont nous avons besoin pour valider correctement notre formulaire. Nous ajoutons également un validations propriété où nous définissons les règles de validation pour chaque champ de formulaire que nous voulons valider.

À ce stade, si vous inspectez les devTools de votre application, vous devriez voir quelque chose qui ressemble à ceci;

propriété calculée vuelidate
vuelidate propriété calculée (Grand aperçu)

le $v La propriété computed contient un certain nombre de méthodes utiles pour confirmer la validité de notre formulaire, mais nous allons nous concentrer uniquement sur quelques-unes d'entre elles:

  1. $invalid
    Pour vérifier si le formulaire passe toutes les validations.
  2. email
    Pour vérifier que la valeur est une adresse e-mail valide.
  3. minValue
    Pour vérifier que la valeur de age passe le minValue vérifier.
  4. minLength
    Pour vérifier la longueur de fullName.
  5. required
    Pour s'assurer que tous les champs obligatoires sont fournis.

Si vous entrez une valeur pour age moins que l'âge minimum fixé lors de la validation et du contrôle $v.form.age.minValue, il serait réglé sur false et cela signifie que la valeur du champ de saisie ne passe pas le minValue contrôle de validation.

Utilisation de validateurs personnalisés

Nous devons également valider notre champ de mot de passe et nous assurer qu'il contient le format requis, mais Vuelidate n'a pas de validateur intégré que nous pouvons utiliser pour y parvenir. Nous pouvons écrire notre propre validateur personnalisé qui le fait en utilisant RegEx. Ce validateur personnalisé ressemblerait à ceci;


Ici, nous créons un validateur personnalisé qui utilise un Regex pour vérifier que le mot de passe contient ce qui suit;

  1. Au moins une lettre majuscule;
  2. Au moins une lettre minuscule;
  3. Au moins un caractère spécial;
  4. Au moins un nombre;
  5. Doit avoir une longueur minimale de 6.

Si vous essayez de saisir un mot de passe qui ne répond à aucune des exigences répertoriées ci-dessus, le validPassword serait réglé sur false.

Maintenant que nous sommes sûrs que nos validations fonctionnent, nous devons afficher les messages d'erreur appropriés afin que l'utilisateur sache pourquoi il ne peut pas continuer. Cela ressemblerait à ceci:


Ici, nous ajoutons un paragraphe qui affiche soit un texte indiquant à l'utilisateur qu'un champ est requis, une valeur saisie pour l'e-mail n'est pas valide ou que le mot de passe ne contient pas les caractères requis. Si nous regardons cela dans votre navigateur, vous verrez les erreurs apparaissant déjà sous chaque champ de saisie.

textes d'erreur dans le formulaire
Textes d'erreur pour chaque champ de saisie (Grand aperçu)

Ceci est mauvais pour l'expérience utilisateur car l'utilisateur n'a pas encore interagi avec le formulaire et en tant que tel, les textes d'erreur ne devraient pas être visibles au moins jusqu'à ce que l'utilisateur essaie de soumettre le formulaire. Pour résoudre ce problème, nous ajouterions submitted à la condition requise pour que les textes d'erreur s'affichent et modifient également la valeur de submitted à true lorsque l'utilisateur clique sur le bouton de soumission.


Désormais, les textes d'erreur n'apparaissent pas tant que l'utilisateur n'a pas cliqué sur le bouton d'envoi, ce qui est bien mieux pour l'utilisateur. Chaque erreur de validation apparaîtrait si la valeur saisie dans le formulaire ne satisfait pas la validation.

Enfin, nous ne souhaiterions traiter l’entrée de l’utilisateur que lorsque toutes les validations de notre formulaire ont été validées et une façon de procéder serait d’utiliser le $invalid propriété sur le form qui est présent dans le $v propriété calculée. Voyons comment faire cela:

methods: {
      login() {
        this.submitted = true;
        let invalidForm = this.$v.form.$invalid;
        //check that every field in this form has been entered correctly.
        if (!invalidForm) {
          // process the form data
        }
      },
    },

Ici, nous vérifions que le formulaire a été entièrement rempli et correctement rempli. S'il revient false, cela signifie que le formulaire est valide et que nous pouvons traiter les données du formulaire mais si c'est true , cela signifie que le formulaire est toujours invalide et que l'utilisateur doit encore corriger certaines erreurs dans le formulaire. Nous pouvons également utiliser cette propriété pour désactiver ou styliser le bouton d'envoi en fonction de vos préférences.

Vuex-persistedstate

Pendant le développement, il existe des cas où vous stockeriez des données telles que les informations et le jeton d'un utilisateur dans votre boutique Vuex. Mais les données de votre magasin Vuex ne persisteraient pas si vos utilisateurs essayaient d'actualiser votre application à partir du navigateur ou d'entrer une nouvelle route à partir de l'onglet URL de votre navigateur et que l'état actuel de votre application se perdait avec elle. Cela entraîne la redirection de l'utilisateur vers la page de connexion si l'itinéraire est protégé par un garde de navigation, ce qui est un comportement anormal pour votre application. Cela peut être corrigé avec vuex-persistedstate, voyons comment.

Installation

Vous pouvez installer ce plugin en utilisant l'une des deux méthodes:

Fil
yarn add vuex-persistedstate
npm
npm install --save vuex-persistedstate

Une fois le processus d'installation terminé, l'étape suivante consiste à configurer ce plugin pour qu'il soit prêt à être utilisé dans votre magasin Vuex.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {},
    plugins: (createPersistedState())
})

À ce stade, tout notre magasin Vuex serait stocké dans localStorage (par défaut) mais vuex-persistedstate est livré avec l'option d'utiliser sessionStorage ou cookies.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {},
  // changes storage to sessionStorage
    plugins: (createPersistedState({ storage: window.sessionStorage });
)
})

Pour confirmer que notre boutique persisterait après l'actualisation ou la fermeture de l'onglet du navigateur, mettons à jour notre boutique pour qu'elle ressemble à ceci:

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        user: null
    },
    mutations: {
        SET_USER(state, user) {
            state.user = user
        }
    },
    actions: {
        getUser({ commit }, userInfo) {
            commit('SET_USER', userInfo)
        }
    },
    plugins: (createPersistedState())
})

Ici, nous ajoutons un user état qui stockerait les données utilisateur à partir du formulaire créé dans la section précédente. Nous ajoutons également un SET_USER mutation qui serait utilisée pour modifier le user Etat. Enfin, nous ajoutons un getUser action qui recevrait l'objet utilisateur et le transmettrait au SET_USER propriété de mutation. La prochaine serait d'envoyer cette action après avoir validé notre formulaire avec succès. Cela ressemble à ceci:

methods: {
    login() {
      this.submitted = true;
      let invalidForm = this.$v.form.$invalid;
      let form = this.form;
      //check that every field in this form has been entered correctly.
      if (!invalidForm) {
        // process the form data
        this.$store.dispatch("getUser", form);
      }
    },
  },

Maintenant, si vous remplissez correctement le formulaire, soumettez-le et ouvrez le localStorage section dans le applications dans les devTools de votre navigateur, vous devriez voir un vuex propriété qui ressemble à ceci:

vuex-persistedstate dans localStorage
Magasin Vuex dans localStorage (Grand aperçu)

À ce stade, si vous actualisez votre navigateur ou ouvrez votre application dans un nouvel onglet, votre user l'état persisterait toujours dans ces onglets / session (sur localStorage).

Conclusion

Il existe de nombreuses bibliothèques qui peuvent être très utiles dans le développement Web de Vuejs et il peut parfois être difficile de choisir celle à utiliser ou de les trouver. Les liens suivants contiennent des bibliothèques que vous pouvez utiliser dans votre application Vue.js.

  1. vuejsexamples.com.
  2. madewithvuejs.com.

Il y a souvent plus d'une bibliothèque qui fait la même chose que vous essayez d'obtenir dans votre application lorsque vous recherchez une «  bibliothèque '', l'important est de vous assurer que l'option que vous choisissez fonctionne pour vous et qu'elle est maintenue par son (ses) créateur (s) afin que votre application ne Pause.

Autres ressources

Éditorial fracassant(ks, ra, il)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *