Come si utilizzano design di materiali in vue.js?

Il design del materiale è il linguaggio di design più popolare al mondo costruito da Google Inc. Fornisce un numero enorme di componenti o modelli di progettazione per dare un aspetto materiale alla tua applicazione. Alcuni quadri front-end basati sul design materiale sono creati dalla comunità e utilizzati per la creazione di applicazioni Web interattive e intuitive. Questo post imparerà l'installazione di "Vue-Materiale" e imparerà a usarlo nella Vue.JS Framework.

Vue Material è una libreria ispirata al design di Google Material utilizzata per la costruzione di app Web.

Installazione del materiale Vue

La libreria di materiali VUE può essere utilizzata come componenti Vue in un progetto VUE. Prima di iniziare con l'installazione del materiale Vue, si presume che tu abbia familiarità con HTML, CSS e JavaScript. Hai impostato il progetto VUE e hai un buon editor installato sul tuo sistema come VS Code. Se non è stato ancora impostato il progetto VUE, è possibile seguire la procedura indicata di seguito per impostare rapidamente un progetto VUE.

Setup Vue Project

Per impostare il progetto VUE, prima, controlla se VUE.JS è installato sul sistema o meno digitando il comando indicato di seguito:

$ vue -version

Se non l'hai ancora installato, digita il comando indicato di seguito per installare Vue.JS a livello globale sul tuo sistema operativo:

$ npm install -g @vue/cli

Dopo aver installato con successo Vue.JS a livello globale sul sistema operativo, crea il progetto VUE digitando il comando "Vue create" indicato di seguito, seguito dal nome del progetto:

$ vue crea vueprojectname

Ti chiederà di selezionare il preimpostazione o di selezionare il tuo preset personalizzato per il progetto VUE.

Dopo aver configurato o selezionato il preimpostazione predefinita, il progetto VUE verrà creato tra un po '.

Dopo aver creato il progetto VUE, vai alla directory del progetto appena creato utilizzando il comando "CD".

$ cd vueprojectname

In questa fase, hai impostato con successo il progetto VUE.

Installare il materiale Vue

Una volta che il sistema è pronto e il progetto VUE è impostato! È possibile installare il "Vue-Materiale" utilizzando il filo o NPM.

Per l'installazione di "Vue-Materiale" utilizzando il gestore pacchetti di filati, digita il comando indicato di seguito:

$ filato aggiungi vue-materiale

O

Per l'installazione di "VUE-Materiale" utilizzando il gestore dei pacchetti NPM, digita il comando indicato di seguito:

$ npm Installa Vue-Materiale-Save

Bene! Una volta che il "Vue-Materiale" è stato installato, è necessario abilitarlo in principale.file js.

Importa vuemateriale da "Vue-Materiale"
import 'vue-material/dist/tema/impostazione predefinita.CSS '
import 'vue-materiale/dist/vue-materiale.min.CSS '
Vue.Usa (vuemateriale)

Dopo aver abilitato il "Vue-Materiale", ora puoi usarlo nel tuo progetto Vue.

Come usare il materiale vue in vue

Per utilizzare il materiale Vue con Vue, "Vue-Materiale" fornisce vari componenti da utilizzare come componente Vue. Ad esempio, un pulsante può essere creato utilizzando il "Vue-Materiale" come questo.

Primario

Per conoscere ulteriori componenti, sentiti libero di visitare la pagina ufficiale di Ghorm Inizia del materiale Vue.

Questo è quanto è semplice installare e iniziare a utilizzare il materiale vue in un progetto VUE.

Conclusione

Vue Material è una libreria di componenti di progettazione di materiale alla moda utilizzata per la costruzione di app Web. In questo post, attraversiamo l'installazione di Vue Material in un Vue.JS Project e guarda come abilitarlo e usarlo. Con la combinazione di tali due librerie robuste, possiamo accelerare il processo di sviluppo e abbellire la nostra applicazione Web ai limiti più alti.