Comment se familiariser avec Vuetify –

Dans cet article, vous allez apprendre à créer rapidement une interface attrayante et interactive en utilisant Vuetify . Construire une interface conviviale avec une expérience utilisateur exceptionnelle est une compétence qui nécessite de la pratique et des connaissances. Bien que Vuetify ne devienne pas du jour au lendemain un expert en UX, il contribuera à donner un bon départ à ceux qui sont novices dans ce domaine.

En tant que développeur de Vue.js, il existe de nombreux frameworks CSS entièrement développés et spécialement développés pour Vue que vous pouvez profiter. Un bon exemple est Bootstrap-Vue . Je l'ai utilisé et cela rend vraiment les composants de construction plus faciles que d'utiliser simplement les frameworks CSS traditionnels. Cependant, vous voudrez peut-être donner à vos applications l'apparence du Material Design pour le familiariser avec les nouveaux utilisateurs.

Selon les concepteurs de Material Design:

«Le design de matériel n'est pas une style unique. C’est un système de conception adaptable inspiré du papier et de l’encre. Et conçu pour vous permettre de créer rapidement de beaux produits utilisables. ”

J'espère que votre attention est attirée par cette déclaration puissante. Actuellement, Vuetify est la bibliothèque de composants d'interface utilisateur la plus complète pour les applications Vue, conforme aux spécifications de Google Material Design. Voyons rapidement comment vous pouvez commencer.

Prérequis

Ce guide est destiné aux développeurs ayant une connaissance intermédiaire ou avancée de Vue.js. Si vous n'avez jamais utilisé Vue.js pour créer des applications, veuillez consulter les articles suivants:

Qu'est-ce que Vuetify?

Vuetify est un projet open source du MIT destiné à la construction d'interfaces utilisateur pour les applications Web et mobiles. Il s'agit d'un projet soutenu par les sponsors et les bénévoles de la communauté Vue. Le projet est soutenu par un Discord community forum dynamique où vous pouvez poser des questions sur JavaScript, même si elles ne concernent pas Vuetify. L'équipe de développement s'est engagée à corriger les bogues et à apporter des améliorations par le biais de cycles de mises à jour cohérents. Il existe également des correctifs hebdomadaires permettant de résoudre les problèmes soulevés par la communauté.

La plupart des bibliothèques front-open open source ne reçoivent pas ce niveau d’attention. Vous pouvez donc être sûr que lorsque vous commencerez à utiliser Vuetify dans vos projets, vous ne serez pas laissé sans assistance dans le futur. Vuetify prend en charge tous les principaux navigateurs prêts à l'emploi. Les navigateurs plus anciens tels que IE11 et Safari 9 peuvent aussi fonctionner, mais ils nécessitent babel-polyfill . Tout ce qui est plus ancien que cela n'est pas pris en charge. Vuetify est construit pour être sémantique. Cela signifie que chaque composant et nom d'accessoire que vous apprendrez sera facile à mémoriser et à réutiliser sans vérifier fréquemment la documentation.

Vuetify est également livré avec thèmes gratuits / premium et préconfigurés. vous pouvez utiliser pour thème rapidement votre application. Au moment de la rédaction de ce document, Vuetify v1.5.13 est la version actuelle qui utilise Material Design Spec v1 . La version 2.x de Vuetify utilisera la spécification de conception de matériau v2 qui sera bientôt disponible disponible . Passons à la section suivante pour voir comment nous pouvons installer Vuetify dans nos projets.

Installation de Vuetify

Si vous avez déjà un projet Vue créé avec une version antérieure de l'outil Vue CLI ou une version antérieure. autrement, vous pouvez simplement installer Vuetify comme suit:

  npm install vuetify

Mettez à jour votre index.js ou main.js et incluez le code suivant:

 import Vue Vue de "vue";
importer Vuetify de "vuetify";
importer "vuetify / dist / vuetify.min.css";

Vue.use (Vuetify);

Vous devez également installer des icônes de matériau, que vous pouvez inclure en tant que balise de lien dans votre fichier index.html :

  
 </ head

Si vous démarrez un nouveau projet, installer Vuetify est très facile. Il suffit de suivre ces étapes:

 $ vue create vuetify-demo
>
$ cd vuetify-demo
$ vue add vuetify
$? Choisissez un préréglage: (Utilisez les touches fléchées)
$> Default (recommandé)
$ Prototype (développement rapide)
$ Configurer (avancé)

Quand on vous demande un préréglage, choisissez simplement Par défaut qui représente le système à la carte . En gros, cela signifie que lorsque vous créez votre application en vue de son déploiement, seuls les composants Vuetify utilisés sont regroupés, et non la totalité de la bibliothèque Vuetify. Cela aidera à réduire considérablement la taille de votre construction. Vous pouvez également utiliser Vue UI pour installer Vuetify dans votre projet. Maintenant que Vuetify est installé, commençons à l’utiliser.

Notions de base

Tout de suite après l’ajout de Vuetify à notre projet, vous remarquerez de nombreux changements dans la structure et le code de notre projet. App.vue .

Si vous démarrez le serveur et ouvrez localhost: 8080 vous devriez avoir la vue suivante:

Notez à quel point la page est différente maintenant de la page de démarrage par défaut qui est généralement créée avec la commande Vue CLI create app . Cela signifie que Vuetify a été configuré correctement. Décomposons le code Vuetify en commençant par ce composant:

Le composant v-app est un wrapper obligatoire pour que votre application fonctionne correctement. Il est utilisé pour déterminer les points d'arrêt de la grille pour la présentation. Il peut exister n'importe où dans mais doit être un parent de tous les composants Vuetify. Le composant v-content doit être un descendant direct de v-app .

Le prochain composant que nous allons aborder est v-toolbar . Cela peut être utilisé comme barre d'outils principale pour votre application. Vous pouvez y placer des icônes, des menus et d’autres éléments.

Le premier accessoire que vous rencontrerez est app . Cela indique simplement à la barre d'outils de rester en haut lorsque l'utilisateur commence à faire défiler l'écran. Si vous supprimez l'accessoire de l'application la barre d'outils défilera avec le reste de la page. Essayez vous-même et voyez ce qui se passe. Nous pouvons en outre ajouter d’autres accessoires pour personnaliser l’apparence de notre barre d’outils.

Vous réaliserez avec Vuetify que vous n’aurez pratiquement plus besoin d’écrire du code CSS pour personnaliser l’apparence de votre application. Toutefois, si vous souhaitez que votre application prenne en charge plusieurs thèmes, vous devrez peut-être définir plusieurs feuilles de style. Vuetify fournit un générateur de thème pour vous aider à choisir un jeu de couleurs pour votre thème.

Pour l'instant, concentrons-nous sur la personnalisation de notre application à l'aide d'accessoires. Le premier que nous allons apprendre s'appelle dark . Il suffit de mettre à jour votre code comme suit:

La page de votre navigateur devrait se mettre à jour comme suit:

L'accessoire sombre change simplement l'arrière-plan en noir et le texte en blanc. Utilisons un autre accessoire appelé color :

Comme prévu, la page de votre navigateur doit être actualisée comme suit:

Supprimez le dark et voyez ce qui se passe: [19659002]

Alors, que vient-il de se passer? Le texte est revenu à la couleur par défaut noire. Lorsque vous spécifiez le support de couleur il remplace la couleur d'arrière-plan définie par le support dark . Pour que le texte redevienne blanc, vous pouvez rajouter le support dark ou vous pouvez simplement le faire:

La page de votre navigateur devrait être mise à jour comme suit:

La couleur de la police du texte a été changée en blanc, mais le bouton a été remplacé par un bouton blanc . la couleur du composant est restée inchangée. Vous pouvez ajouter le support sombre ou de couleur = "blanc - texte au composant du bouton pour le rendre blanc. Au lieu d'utiliser le support vous pouvez également utiliser la classe pour obtenir le même résultat. En règle générale, toute couleur que vous spécifiez seule devient la couleur d'arrière-plan. Pour spécifier la couleur de la police, vous devez Ajoutez - texte au nom de la couleur. Utilisez n'importe quelle couleur autre que le blanc ou le rouge – essayez l'orange, le bleu, le vert, etc. Faisons quelque chose de cool à l'étape suivante. Mettez à jour le code de la barre d'outils. comme suit:

La page de votre navigateur devrait être actualisée comme suit:

Le texte n'est pas très lisible, n'est-ce pas? Une façon de résoudre ce problème consiste à utiliser des couleurs contrastées. Une autre façon de résoudre ce problème consiste à assombrir l'arrière-plan et à éclaircir l'avant-plan. Mettez à jour le code comme suit:

La page de votre navigateur devrait être actualisée comme suit:

Le texte est beaucoup plus lisible maintenant. Pour assombrir l'arrière-plan, vous pouvez utiliser les valeurs de darken-1 à darken-4 . Chaque niveau augmente l'obscurité. Vous pouvez utiliser les valeurs de lighten-1 à lighten-4 pour éclaircir l'arrière-plan. Si vous souhaitez modifier la couleur du texte, ajoutez le texte - devant les attributs éclaircir ou assombrir, par exemple. text - lighten-3 . Nous avons également accent-1 à accent-4 qui semble contrôler la saturation. accent-1 désature la couleur alors que accent-4 augmente la saturation et devient plus éclatant.

Veuillez noter que je ne tire pas ces accessoires et ces valeurs de tout nuage. Voici la documentation sur les couleurs Vuetify .

Ne vous inquiétez pas de la mémorisation des noms d'accessoires ou de classes. Il suffit de consulter la documentation Vuetify et vous trouverez ce que vous recherchez. Voici la documentation pour v-toolbar . Notez qu'il y a tellement d'accessoires que nous n'avons pas essayés, tels que:

N'hésitez pas à vous amuser avec tous. Voyez ce qu'ils font. Veuillez noter que la majorité des composants Vuetify partagent les mêmes accessoires tels que color . Voyons ensuite brièvement le système de grille.

Le système de grille

Vuetify utilise un système de grille en 12 points pour structurer le contenu d’une application. Il a été construit à l’aide du CSS Flexbox Layout Module qui est un système permettant de distribuer des éléments dans une structure de présentation réactive sans utiliser de flottants ni de positions. La grille prend en charge 5 points de cassure de supports ciblant des tailles ou des orientations d’écran spécifiques.

Pour une démonstration pratique, rendez-vous dans components / HelloWorld.vue et regardez le fichier. Voici une version simplifiée du code:

Le composant v-container centre simplement votre contenu au milieu de l'écran. Si vous ajoutez l'accessoire fluid votre contenu occupera toute la largeur de l'écran. v-layout est utilisé pour grouper le contenu et l'aligner. Une démonstration en direct de v-layout vous aidera à comprendre comment l’utiliser. Le composant v-flex est essentiellement une boîte de contenu pouvant occuper une ou plusieurs colonnes.

Nous n'entrerons pas dans les détails sur la page Vuetify. grille – c'est un sujet qui mérite son propre article. Si vous débutez dans les grilles, vous pouvez consulter notre article, Introduction aux modules de disposition en grille CSS . Sinon, il vous suffit de faire défiler jusqu'à la section suivante et d'apprendre comment configurer le routage et la navigation dans Vuetify.

Routage et navigation

Lors de l'installation, il existe une option pour installer le paquet de routeurs. Si vous avez fait cela, alors vous devriez avoir des fichiers dans le dossier views . Confirmez que le fichier router.js existe et a été configuré correctement. Vuetify a été construit avec vue-router à l'esprit. Par conséquent, vous constaterez que vous n’avez pas besoin d’utiliser le composant router-link . Un certain nombre de composants Vuetify peuvent agir en tant que liaisons de route en spécifiant simplement les éléments à

. Remplacez le code dans App.vue par ce qui suit:

J’ai mis des commentaires dans le code pour que vous puissiez suivre. Il serait sage de placer les éléments de menu dans une structure de données matricielle. Cependant, par souci de simplicité, j'ai laissé la duplication de code intacte afin que vous puissiez comprendre facilement la structure des composants Vuetify. Vous trouverez ci-dessous des liens vers des documentations sur certains des composants que nous venons d’utiliser:

Au cas où vous ne le remarqueriez pas, Vuetify a automatiquement ajouté un lien vers les icônes de matériau dans index.html . Vous pouvez commencer à accéder aux icônes de matériau immédiatement. Ensuite, remplacez le code dans vues / Home.vue par:

Remplacez également le code dans vues / About.vue par:

Après avoir apporté les modifications ci-dessus, votre navigateur devrait se mettre à jour automatiquement. Voici comment l’application doit ressembler à la vue complète du bureau:

Lorsque vous redimensionnez le navigateur, l’application doit basculer vers la vue mobile. Voici ce à quoi devrait ressembler le menu latéral ouvert:

Je pense que nous avons créé une application Web réactive attrayante avec peu de lignes de code. . Terminons par la construction d’un composant LoginForm dans la section suivante

Création du formulaire de connexion

La ​​création du formulaire de connexion est assez simple. Créez le fichier composants / Login.vue et copiez le code suivant:

J'ai utilisé les composants suivants pour créer l'écran de connexion:

Consultez la documentation de chaque composant pour voir ce que vous pouvez personnaliser à son propos. Prochaine mise à jour vues / Home.vue comme suit:

Si vous vous demandez ce que signifie la classe mt-5 elle ajoute simplement un bord supérieur de 48px. Consultez la documentation sur spacing pour comprendre son fonctionnement dans Vuetify. Vous pouvez facilement ajouter des marges et des marges prédéfinies dans n’importe quelle direction de votre contenu en spécifiant des classes. Votre page d'accueil devrait maintenant afficher ce qui suit:

Résumé

Maintenant que vous êtes arrivé à la fin de cet article d'introduction, sachez que nous n'avons fait qu'effleurer la surface. Si vous avez déjà utilisé d’autres frameworks CSS tels que Bootstrap, vous trouverez Vuetify très facile à utiliser. En fait, vous constaterez que Vuetify possède beaucoup plus de fonctionnalités et de composants utiles que les frameworks CSS les plus courants. Si vous souhaitez créer une application Web avec un aspect entièrement personnalisé, Vuetify peut ne pas vous convenir. Vuetify est destiné à ceux qui veulent construire rapidement une interface Web en utilisant un design familier à la plupart des gens. Material Design est un système très répandu implémenté sur tous les appareils Android non équipés d’un habillage personnalisé.

Vuetify peut vous aider à gagner du temps et de l’argent en utilisant un design frontal extrêmement documenté. Vous n'avez pas à passer beaucoup de temps à créer votre propre langage de conception. Vous n’avez même pas besoin d’écrire CSS, sauf de déclarer les couleurs par défaut pour votre thème d’application.

J’espère que vous avez apprécié l’apprentissage de Vuetify et que c’est votre référence pour la construction d’applications Vue.js dans le futur!

J’écris du code propre, lisible et modulaire. J'aime apprendre de nouvelles technologies qui améliorent l'efficacité et la productivité de mon flux de travail.