Vue

Hvordan bruker du materialdesign i Vue.js?

Hvordan bruker du materialdesign i Vue.js?

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 visumateriale

ELLER

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.

Hoved

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.

Topp Oculus App Lab-spill
Hvis du er Oculus-hodesettinnehaver, må du være klar over sideloading. Sidelading er prosessen med å installere ikke-butikkinnhold på hodesettet. Side...
Topp 10 spill å spille på Ubuntu
Windows-plattformen har vært en av de dominerende plattformene for spill på grunn av den enorme andelen spill som utvikles i dag for å støtte Windows ...
5 beste arkadespill for Linux
I dag er datamaskiner seriøse maskiner som brukes til spill. Hvis du ikke kan få den nye høye poengsummen, vil du vite hva jeg mener. I dette innlegge...