Proiectarea materialelor este cel mai popular limbaj de proiectare din lume construit de Google Inc. Oferă un număr mare de componente sau șabloane de proiectare pentru a oferi un aspect material aplicației dvs. Unele cadre front-end bazate pe proiectarea materialelor sunt create de comunitate și utilizate pentru crearea de aplicații web interactive și intuitive. Această postare va învăța despre instalarea „vue-material” și va învăța să o utilizați în Vue.js Framework.
Vue Material este o bibliotecă inspirată de Google Material Design, utilizată pentru construirea de aplicații web.
Instalarea materialului Vue
Biblioteca de materiale Vue poate fi utilizată ca componente Vue într-un proiect Vue. Înainte de a începe cu instalarea materialului Vue, se presupune că sunteți familiarizați cu HTML, CSS și Javascript. Ați configurat Vue Project și aveți un editor bun instalat pe sistemul dvs., cum ar fi codul VS. Dacă nu ați configurat încă proiectul Vue, puteți urma procedura dată mai jos pentru a configura rapid un proiect Vue.
Configurați proiectul Vue
Pentru a configura proiectul Vue, verificați mai întâi dacă Vue.js este instalat sau nu pe sistemul dvs. tastând comanda dată mai jos:
$ vue --version
Dacă nu l-ați instalat încă, tastați comanda dată mai jos pentru a instala Vue.js la nivel global pe sistemul dvs. de operare:
$ npm install -g @ vue / cli
După instalarea cu succes a Vue.js la nivel global pe sistemul dvs. de operare, creați proiectul Vue tastând comanda „vue create” dată mai jos, urmată de numele proiectului:
$ vue create vueprojectname
Vă va cere fie să selectați presetarea, fie să selectați propria presetare personalizată pentru proiectul Vue.
După configurarea sau selectarea presetării implicite, proiectul Vue va fi creat într-un timp.
După crearea proiectului Vue, navigați la directorul proiectului nou creat folosind comanda „cd”.
$ cd vueprojectname
În această etapă, ați configurat cu succes proiectul Vue.
Instalați Vue Material
Odată ce sistemul dvs. este gata și proiectul Vue este configurat! Puteți instala „vue-material” folosind Yarn sau NPM.
Pentru instalarea „vue-material” utilizând managerul de pachete Yarn, tastați comanda dată mai jos:
$ yarn adaugă vue-materialSAU
Pentru instalarea „vue-material” utilizând managerul de pachete NPM, tastați comanda dată mai jos:
$ npm instala vue-material --save
Bine! Odată ce „vue-material” este instalat, trebuie să îl activați în principal.js.
importați VueMaterial din „vue-material”import 'vue-material / dist / theme / default.css '
import 'vue-material / dist / vue-material.min.css '
Vue.utilizare (VueMaterial)
După activarea „vue-material”, îl puteți utiliza acum în proiectul Vue.
Cum se folosește Vue Material în Vue
Pentru a utiliza Vue Material cu Vue, „vue-material” oferă diferite componente de utilizat ca componentă Vue. De exemplu, un buton poate fi creat folosind „vue-material” ca acesta.
Pentru a afla despre alte componente, nu ezitați să vizitați pagina oficială de început a Vue Material.
Acesta este cât de simplu este să instalați și să începeți să utilizați Vue Material într-un proiect Vue.
Concluzie
Vue Material este o bibliotecă de componente pentru designul materialelor la modă, utilizată pentru construirea de aplicații web. În acest post, parcurgem instalarea Vue Material într-o Vue.js și vedeți cum să îl activați și să îl utilizați. Cu combinația acestor două biblioteci robuste, putem accelera procesul de dezvoltare și înfrumuseța aplicația noastră web la cele mai înalte limite.