Como você usa designs de materiais em vue.JS?

Design de material é a linguagem de design mais popular do mundo construída pelo Google Inc. Ele fornece um grande número de componentes ou modelos de design para dar uma aparência material ao seu aplicativo. Algumas estruturas de front-end baseadas em design de material são criadas pela comunidade e usadas para criar aplicativos da Web interativos e intuitivos. Este post aprenderá sobre a instalação de 'Vue Material' e aprenderá a usá-lo no Vue.Estrutura JS.

O Material Vue é uma biblioteca inspirada no design do Google Material usada para a criação de aplicativos da web.

Instalação do material VUE

A biblioteca de materiais vue pode ser usada como componentes de vue em um projeto VUE. Antes de começar a instalação do material Vue, supõe -se que você esteja familiarizado com HTML, CSS e JavaScript. Você configurou o projeto Vue e tem um bom editor instalado no seu sistema como vs código. Se você ainda não configurou o projeto Vue, pode seguir o procedimento abaixo para configurar um projeto VUE rapidamente.

Projeto Vue Setup

Para configurar o projeto Vue, primeiro, verifique se Vue.O JS está instalado no seu sistema ou não digitando o comando abaixo:

$ vue -versão

Se você ainda não o instalou, digite o comando abaixo para instalar o VUE.JS globalmente em seu sistema operacional:

$ npm install -g @vue/cli

Depois de instalar com sucesso o VUE.JS Globalmente em seu sistema operacional, crie o projeto Vue digitando o comando "Vue Create", dado abaixo, seguido pelo nome do projeto:

$ Vue Crie VueProjectName

Ele solicitará que você selecione a predefinição ou selecione sua própria predefinição personalizada para o projeto Vue.

Depois de configurar ou selecionar a predefinição padrão, o projeto Vue será criado há algum tempo.

Depois de criar o projeto Vue, navegue para o diretório do projeto recém -criado usando o comando "CD".

$ CD VueProjectName

Nesta fase, você configurou com sucesso o projeto Vue.

Instale o material VUE

Uma vez que seu sistema estiver pronto, e o projeto Vue é configurado! Você pode instalar o “Material Vue” usando o fio ou o NPM.

Para instalar 'Vue Material' usando o gerenciador de pacotes de fios, digite o comando dado abaixo:

$ yarn adicione vue-material

OU

Para instalar 'Vue Material' usando o gerenciador de pacotes NPM, digite o comando dado abaixo:

$ NPM Instale Vue-Material-Save

Tudo bem! Uma vez que o 'Material Vue' é instalado, você deve habilitá-lo no principal.arquivo js.

Importar vuematerial de 'Vue Material'
Importar 'Vue Material/Dist/Theme/Padrão.CSS '
Importar 'Vue Material/Dist/Vue Material.min.CSS '
Vue.Use (Vuematerial)

Depois de ativar o "Material Vue", agora você pode usá-lo em seu projeto Vue.

Como usar o material vue em vue

Para usar o material Vue com Vue, 'Vue Material' fornece vários componentes para usar como um componente VUE. Por exemplo, um botão pode ser criado usando o 'Material Vue' como este.

Primário

Para saber sobre mais componentes, sinta -se à vontade para visitar a página oficial de início do material vue.

É assim que é simples instalar e começar a usar o material VUE em um projeto Vue.

Conclusão

O material Vue é uma biblioteca de componentes de design de material da moda usada para criar aplicativos da web. Neste post, atravessamos a instalação do Vue Material em uma vue.JS Project e veja como habilitá -lo e usá -lo. Com a combinação dessas duas bibliotecas robustas, podemos acelerar o processo de desenvolvimento e embelezar nosso aplicativo da web com os limites mais altos.