Phenquestions
Il material design è il linguaggio di design più popolare al mondo creato da Google Inc. Fornisce un numero enorme di componenti o modelli di progettazione per dare un aspetto materiale alla tua applicazione. Alcuni framework front-end basati sul material design sono creati dalla community e utilizzati per creare applicazioni web interattive e intuitive. Questo post imparerà a conoscere l'installazione di 'vue-material' e imparerà a usarlo nel Vue.js Framework.
Vue Material è una libreria ispirata a Google Material Design utilizzata per creare 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 il codice VS. Se non hai ancora configurato il progetto Vue, puoi seguire la procedura indicata di seguito per configurare rapidamente un progetto Vue.
Imposta progetto Vue
Per configurare il progetto Vue, prima controlla se Vue.js è installato o meno sul tuo sistema digitando il comando indicato di seguito:
$ vue --version
Se non l'hai ancora installato, digita il comando indicato di seguito per installare Vue.js globalmente sul tuo sistema operativo:
$ npm install -g @vue/cli
Dopo aver installato con successo Vue.js globalmente sul tuo sistema operativo, crea il progetto Vue digitando il comando "vue create" indicato di seguito, seguito dal nome del progetto:
$ vue create vueprojectname
Ti verrà chiesto di selezionare il preset o di selezionare il tuo preset personalizzato per il progetto Vue.
Dopo aver configurato o selezionato il preset predefinito, il progetto Vue verrà creato in un attimo.
Dopo aver creato il progetto Vue, vai alla directory del progetto appena creato usando il comando "cd".
$ cd vueprojectname
In questa fase, hai impostato con successo il progetto Vue.
Installa materiale Vue
Una volta che il sistema è pronto e il progetto Vue è configurato! È possibile installare il "materiale vue" utilizzando il filato o NPM.
Per installare 'vue-material' utilizzando il gestore di pacchetti Yarn, digita il comando indicato di seguito:
$ filato aggiungi vue-materialO
Per installare 'vue-material' utilizzando il gestore di pacchetti NPM, digitare il comando indicato di seguito:
$ npm installa vue-material --save
Tutto a posto! Una volta installato il 'vue-material', devi abilitarlo nel main.js file.
importa VueMaterial da 'vue-material'import 'vue-material/dist/theme/default.css'
import 'vue-material/dist/vue-material.min.css'
Vue.usa (Materiale Vue)
Dopo aver abilitato il "materiale Vue", ora puoi usarlo nel tuo progetto Vue.
Come utilizzare il materiale Vue in Vue
Per utilizzare Vue Material con Vue, "vue-material" fornisce vari componenti da utilizzare come componente Vue. Ad esempio, un pulsante può essere creato utilizzando il 'vue-material' come questo.
Per conoscere ulteriori componenti, non esitare a visitare la pagina introduttiva ufficiale di Vue Material.
Ecco quanto è semplice installare e iniziare a utilizzare Vue Material in un progetto Vue.
Conclusione
Vue Material è una libreria di componenti di design di materiali alla moda utilizzata per la creazione di app Web web. In questo post, esaminiamo l'installazione di Vue Material in un Vue.js e scopri come abilitarlo e usarlo. Con la combinazione di due librerie così robuste, possiamo accelerare il processo di sviluppo e abbellire la nostra applicazione web ai limiti più alti.
