¿Cómo se usa diseños de materiales en Vue?.js?

El diseño de material es el lenguaje de diseño más popular del mundo construido por Google Inc. Proporciona una gran cantidad de componentes o plantillas de diseño para dar un aspecto de material a su aplicación. La comunidad crea algunos marcos frontales basados ​​en el diseño de materiales y se utilizan para crear aplicaciones web interactivas e intuitivas. Esta publicación aprenderá sobre la instalación de 'Vue-Material' y aprenderá a usarla en el Vue.marco JS.

Vue Material es una biblioteca inspirada en el diseño de material de Google utilizada para construir aplicaciones web.

Instalación de material VUE

La biblioteca de material VUE se puede usar como componentes VUE en un proyecto VUE. Antes de comenzar con la instalación del material VUE, se supone que está familiarizado con HTML, CSS y JavaScript. Ha configurado el proyecto VUE y tiene un buen editor instalado en su sistema como VS Code. Si aún no ha configurado el proyecto VUE, puede seguir el procedimiento que se proporciona a continuación para configurar un proyecto VUE rápidamente.

Proyecto de configuración Vue

Para configurar el proyecto VUE, primero, verifique si Vue.JS está instalado en su sistema o no escribiendo el comando que se proporciona a continuación:

$ Vue -Versión

Si aún no lo ha instalado, escriba el comando que se proporciona a continuación para instalar Vue.JS a nivel mundial en su sistema operativo:

$ npm instalación -g @vue/cli

Después de instalar con éxito Vue.JS a nivel mundial en su sistema operativo, cree el proyecto VUE escribiendo el comando "Vue Create" que se proporciona a continuación, seguido del nombre del proyecto:

$ vue crea vueProjectName

Le pedirá que seleccione el preajuste o seleccione su propio preajuste personalizado para el proyecto VUE.

Después de configurar o seleccionar el preajuste predeterminado, el proyecto VUE se creará en un tiempo.

Después de crear el proyecto VUE, navegue al directorio del proyecto recién creado utilizando el comando "CD".

$ CD VueProjectName

En esta etapa, ha configurado con éxito el proyecto VUE.

Instalar material Vue

Una vez que su sistema esté listo y el proyecto VUE está configurado! Puede instalar el "Vue-Material" utilizando el hilo o el npm.

Para instalar 'Vue-Material' utilizando el Administrador de paquetes de hilo, escriba el comando que se proporciona a continuación:

$ hilo agregue vue-material

O

Para instalar 'Vue-Material' utilizando el Administrador de paquetes NPM, escriba el comando que se proporciona a continuación:

$ npm instalación vue-material --save

Está bien! Una vez que se incluye el 'Vue-Material', debe habilitarlo en la principal.archivo js.

Importar vueMaterial desde 'Vue-Material'
import 'Vue-Material/Dist/Theme/Default.CSS '
importar 'Vue-Material/Dist/Vue-Material.mínimo.CSS '
Vue.Uso (Vuematerial)

Después de habilitar el "Vue-Material", ahora puede usarlo en su proyecto VUE.

Cómo usar el material Vue en Vue

Para usar el material VUE con Vue, 'Vue-Material' proporciona varios componentes para usar como componente Vue. Por ejemplo, se puede crear un botón usando el 'Vue-Material' como este.

Primario

Para conocer más componentes, no dude en visitar la página oficial de la entrada del material VUE.

Así de simple es instalar y comenzar a usar el material VUE en un proyecto VUE.

Conclusión

Vue Material es una biblioteca de componentes de diseño de material de moda utilizada para construir aplicaciones web. En esta publicación, pasamos por la instalación de Vue Material en un Vue.proyecto JS y ver cómo habilitarlo y usarlo. Con la combinación de tales dos bibliotecas robustas, podemos acelerar el proceso de desarrollo y embellecer nuestra aplicación web a los límites más altos.