Comment utilisez-vous des conceptions de matériaux en Vue.js?

La conception de matériaux est le langage de conception le plus populaire au monde construit par Google Inc. Il fournit un grand nombre de composants ou de modèles de conception pour donner un aperçu de votre application. Certains cadres frontaux basés sur la conception de matériaux sont créés par la communauté et utilisés pour créer des applications Web interactives et intuitives. Cet article se rendra compte de l'installation de «Vue-Material» et apprendra à l'utiliser dans la Vue.Framework JS.

Vue Material est une bibliothèque inspirée de la conception Google Material utilisée pour créer des applications Web.

Installation de matériaux Vue

La bibliothèque de matériaux Vue peut être utilisée comme composants Vue dans un projet VUE. Avant de démarrer avec l'installation de Vue Material, il est supposé que vous connaissez HTML, CSS et JavaScript. Vous avez configuré le projet VUE et vous avez un bon éditeur installé sur votre système comme le code VS. Si vous n'avez pas encore configuré le projet VUE, vous pouvez suivre la procédure ci-dessous pour configurer rapidement un projet VUE.

Configuration du projet VUE

Pour configurer le projet VUE, vérifiez d'abord si Vue.JS est installé sur votre système ou non en tapant la commande ci-dessous:

$ vue --version

Si vous ne l'avez pas encore installé, tapez la commande donnée ci-dessous pour installer Vue.JS à l'échelle mondiale sur votre système d'exploitation:

$ npm install -g @ vue / CLI

Après avoir réussi à installer Vue.JS globalement sur votre système d'exploitation, créez le projet VUE en tapant la commande «Vue Create» ci-dessous, suivie du nom du projet:

$ Vue Créer VueprojectName

Il vous demandera de sélectionner le préréglage ou de sélectionner votre propre préréglage personnalisé pour le projet VUE.

Après avoir configuré ou sélectionné le préréglage par défaut, le projet VUE sera créé dans un certain temps.

Après avoir créé le projet VUE, accédez au répertoire du projet nouvellement créé à l'aide de la commande «CD».

$ CD VueprojectName

À ce stade, vous avez réussi à créer le projet VUE.

Installer le matériau Vue

Une fois votre système prêt et le projet VUE est configuré! Vous pouvez installer le «Vue-Material» à l'aide du fil ou du NPM.

Pour l'installation de «Vue-Material» à l'aide du gestionnaire de package de fils, saisissez la commande ci-dessous:

$ yarn ajouter vue-matériau

OU

Pour installer «Vue-Material» à l'aide du gestionnaire de package NPM, saisissez la commande ci-dessous:

$ npm install vue-material - save

Bien! Une fois que le «Vue-Material» est en train de l'activer, vous devez l'activer dans l'ensemble.fichier js.

Importer Vuematériau de «Vue-Matériau»
import 'Vue-material / Dist / thème / par défaut.CSS '
import 'vue-matériau / dist / vue-matériau.min.CSS '
Vue.Utilisation (Vuematerial)

Après avoir activé le «Vue-Material», vous pouvez maintenant l'utiliser dans votre projet VUE.

Comment utiliser le matériel Vue dans Vue

Pour utiliser du matériau Vue avec Vue, «Vue-Material» fournit divers composants à utiliser comme composant Vue. Par exemple, un bouton peut être créé en utilisant le «Vue-Material» comme celui-ci.

Primaire

Pour connaître d'autres composants, n'hésitez pas à visiter la page officielle de démarrage du matériel Vue.

C'est à quel point il est simple d'installer et de commencer à utiliser du matériel Vue dans un projet VUE.

Conclusion

Vue Material est une bibliothèque de composants de conception de matériaux à la mode utilisée pour créer des applications Web. Dans cet article, nous parcourons l'installation de Vue Material dans un Vue.JS Project et voir comment l'activer et l'utiliser. Avec la combinaison de ces deux bibliothèques robustes, nous pouvons accélérer le processus de développement et embellir notre application Web dans les limites les plus élevées.