Materiell design er verdens mest populære designspråk bygget av Google Inc. Det gir et stort antall komponenter eller designmaler for å gi et materiale utseende til applikasjonen din. Noen materialdesignbaserte frontend-rammer er laget av samfunnet og brukes til å lage interaktive og intuitive webapplikasjoner. Dette innlegget vil lære om installasjonen av 'vue-material' og lære å bruke det i Vue.js Framework.
Vue Material er et Google Material Design-inspirert bibliotek som brukes til å bygge webapper.
Installasjon av Vue-materiale
Vue-materialbiblioteket kan brukes som Vue-komponenter i et Vue-prosjekt. Før du begynner med installasjonen av Vue-materialet, antas det at du er kjent med HTML, CSS og Javascript. Du har satt opp Vue-prosjektet, og du har en god editor installert på systemet ditt som VS-kode. Hvis du ikke har satt opp Vue-prosjektet ennå, kan du følge fremgangsmåten nedenfor for å sette opp et Vue-prosjekt raskt.
Sett opp Vue-prosjekt
For å sette opp Vue-prosjektet, må du først sjekke om Vue.js er installert på systemet ditt eller ikke ved å skrive kommandoen nedenfor:
$ vue --versjon
Hvis du ikke har installert den ennå, skriver du inn kommandoen nedenfor for å installere Vue.js globalt på operativsystemet ditt:
$ npm install -g @ vue / cli
Etter å ha installert Vue.js globalt på operativsystemet ditt, opprett Vue-prosjektet ved å skrive kommandoen “vue create” gitt nedenfor, etterfulgt av prosjektnavnet:
$ vue create vueprojectname
Det vil be deg om å enten velge forhåndsinnstillingen eller velge din egen tilpassede forhåndsinnstilling for Vue-prosjektet.
Etter å ha konfigurert eller valgt standard forhåndsinnstilling, vil Vue-prosjektet bli opprettet om en stund.
Etter å ha opprettet Vue-prosjektet, naviger til katalogen til det nyopprettede prosjektet ved hjelp av kommandoen “cd”.
$ cd vueprojectname
På dette stadiet har du vellykket satt opp Vue-prosjektet.
Installer Vue-materiale
Når systemet ditt er klart, og Vue-prosjektet er satt opp! Du kan installere “visumaterialet” ved hjelp av garn eller NPM.
For å installere 'vue-material' ved hjelp av garnpakkebehandleren skriver du inn kommandoen nedenfor:
$ garn legger til visumaterialeELLER
For å installere 'vue-material' ved hjelp av NPM-pakkebehandling, skriv kommandoen nedenfor:
$ npm install vue-material --save
Ok! Når 'visumaterialet' er installert, må du aktivere det hovedsakelig.js-fil.
importere VueMaterial fra 'vue-material'importer 'vue-material / dist / theme / default.css '
importer 'visumateriale / dist / visumateriale.min.css '
Vue.bruk (VueMaterial)
Etter at du har aktivert “visumaterialet”, kan du nå bruke det i Vue-prosjektet ditt.
Hvordan bruke Vue-materiale i Vue
For å bruke Vue-materiale med Vue, tilbyr 'vue-material' forskjellige komponenter som kan brukes som Vue-komponent. For eksempel kan en knapp opprettes ved hjelp av 'visumaterialet' som dette.
For å vite om flere komponenter, besøk gjerne den offisielle start-siden til Vue Material.
Dette er hvor enkelt det er å installere og begynne å bruke Vue Material i et Vue-prosjekt.
Konklusjon
Vue Material er et trendy materialdesignkomponentbibliotek som brukes til å bygge webapper. I dette innlegget går vi gjennom Vue Materials installasjon i en Vue.js prosjekt og se hvordan du aktiverer det og bruker det. Med kombinasjonen av slike to robuste biblioteker, kan vi øke hastigheten på utviklingsprosessen og forskjønne webapplikasjonen vår til de høyeste grensene.