Outils utiles dans le développement Web Vue.js

À propos de l'auteur

Développeur front-end basé à Lagos, Nigeria. Il aime convertir des conceptions en code et créer des éléments pour le Web.
En savoir plus sur
Timi
…

Lorsque vous travaillez sur un nouveau projet, certaines fonctionnalités sont nécessaires selon la façon dont le 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 peut-être à votre cas d'utilisation.

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

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

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

Ce didacticiel est destiné aux débutants qui viennent juste de commencer à se familiariser avec 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

Lors de 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 des messages et des 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 toute votre application et il ne nécessite pas beaucoup de configuration pour être opérationnel.

Installation

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

Yarn

 yarn add vue-notification

npm

 npm install --save vue-notification

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

main.js

 // plusieurs lignes du code existant dans le fichier
    importer des notifications depuis 'vue-notification'
    Vue.use (Notifications)
  

À ce stade, il suffit d'ajouter le composant de notifications dans le fichier App.vue avant de pouvoir afficher les notifications dans notre application. La raison pour laquelle nous ajoutons ce composant au fichier App.vue est d'éviter les répétitions dans notre application, car quelle que soit la page sur laquelle l'utilisateur se trouve dans notre application, les composants de App.vue [19659020] (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 accessoire de groupe qui serait utilisé pour regrouper les différents types de notifications que nous avons. En effet, le composant 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 de la notification, de la validation du formulaire, de la réponse 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 les 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 ie .vue-notification.warn pour warn et ainsi de suite.
3. duration
   Cet accessoire spécifie la durée de la notification doit apparaître avant de disparaître. Il accepte un nombre comme valeur en ms et accepte également un nombre négatif (-1) si vous voulez 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 en haut à gauche en haut à droite en haut au centre en bas à droite en bas à gauche , et bas au centre .

Nous pouvons ajouter ces accessoires à notre composant dans App.vue pour qu'il 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 ({
  groupe: "démo",
  erreur-type",
  text: "Ceci est une notification d'erreur",
});

Ici, nous créons une notification d'erreur de type sous le groupe notification de démo . 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.

Vous pouvez trouver les autres accessoires disponibles et d'autres façons de configurer la notification sur la page de la documentation officielle .

Vuelidate

Un des les é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']etc.) et il est toujours nécessaire de valider l'entrée utilisateur pour assurez-vous qu'ils envoient les bonnes données et / ou utilisent 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é.

Quand j'ai finalement regardé la documentation, j'ai découvert qu'il n'était pas difficile de démarrer et que je pouvais valider mes champs de formulaire en un rien de temps et passer à l'étape suivante.

Installation

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

Yarn

 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 fichier main.js afin que vous puissiez l'utiliser dans vos fichiers vue.

 importer Vuelidate depuis '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 la longueur minimale de fullName doit être de 10 et l'âge minimum de 18 .

Vuelidate est livré avec built -dans des validateurs 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 Le mot de passe doit contenir au moins une lettre minuscule, une lettre majuscule et un caractère spécial . 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.

Using Built-In Validators

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

À ce stade, si vous inspectez les outils de développement de votre application, vous devriez voir quelque chose qui ressemble comme ceci;

La propriété calculée $ v contient un certain nombre de méthodes utiles en confirmant la validité de notre formulaire mais nous allons nous concentrer uniquement sur quelques-uns d'entre eux:

1. $ invalid
   Pour vérifier si le formulaire passe toute la validation.
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 contrôle minValue .
4. minLength
   Pour vérifier la longueur de fullName .
5. required
   Pour garantir que tous les champs obligatoires sont fournis.

Si vous entrez ra valeur pour âge inférieure à l'âge minimum défini dans la validation et la vérification $ v.form.age.minValue elle serait définie sur false et ceci signifie que la valeur dans le champ de saisie ne passe pas le contrôle de validation minValue .

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 pas Vuelidate avoir un validateur intégré que nous pouvons utiliser pour y parvenir. Nous pouvons écrire notre propre validateur personnalisé qui fait cela 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 énumérées ci-dessus, le validPassword serait être mis à 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.