Hvordan bruker du materialdesign i vue.JS?

Materialdesign er verdens mest populære designspråk bygget av Google Inc. Det gir et stort antall komponenter eller designmaler for å gi et materielt utseende til applikasjonen din. Noen materielle designbaserte front-end-rammer er opprettet av samfunnet og brukes til å lage interaktive og intuitive webapplikasjoner. Dette innlegget vil lære om installasjonen av 'Vue-materiale' 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 Material Library kan brukes som Vue -komponenter i et Vue -prosjekt. Før du kommer i gang med Vue Material Installation, antas det at du er kjent med HTML, CSS og JavaScript. Du har satt opp Vue -prosjektet, og du har en god redaktør installert på systemet ditt som VS -kode. Hvis du ikke har satt opp Vue -prosjektet ennå, kan du følge prosedyren nedenfor for å sette opp et Vue -prosjekt raskt.

Sett opp Vue -prosjekt

For å sette opp Vue -prosjektet, først, sjekk om Vue.JS er installert på systemet ditt eller ikke ved å skrive kommandoen gitt nedenfor:

$ VUE -Versjon

Hvis du ikke har installert den ennå, skriver du kommandoen gitt 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 “Vue Create” -kommandoen gitt nedenfor, etterfulgt av prosjektnavnet:

$ VUE Create VueProjectName

Det vil be deg om å velge forhåndsinnstilling eller velge din egen tilpassede forhåndsinnstilling for Vue -prosjektet.

Etter å ha konfigurert eller valgt standard forhåndsinnstilling, vil Vue -prosjektet bli opprettet på en stund.

Etter å ha opprettet Vue -prosjektet, navigerer du til det nyopprettede prosjektets katalog ved hjelp av “CD” -kommandoen.

$ CD VueProjectName

På dette stadiet har du vellykket satt opp Vue -prosjektet.

Installer Vue -materiale

Når systemet er klart, og Vue -prosjektet er satt opp! Du kan installere "Vue-materialet" ved hjelp av garn eller npm.

For å installere 'Vue-materiale' ved hjelp av Yarn Package Manager, skriver du kommandoen gitt nedenfor:

$ garn Legg til Vue-materiale

ELLER

For å installere 'Vue-materiale' ved hjelp av NPM Package Manager, skriver du kommandoen gitt nedenfor:

$ npm installer Vue-materiale-lagre

Ok! Når 'Vue-materialet' er installert, må du aktivere det i hovedsak.JS -fil.

Importer vuemateriale fra 'Vue-materiale'
Importer 'Vue-materiale/dist/tema/standard.CSS '
Importer 'vue-materiale/dist/vue-materiale.min.CSS '
Vue.bruk (vuemateriale)

Etter å ha aktivert "Vue-materialet", kan du nå bruke det i Vue-prosjektet ditt.

Hvordan du bruker vue materiale i vue

For å bruke Vue-materiale med Vue, gir 'Vue-materiale' forskjellige komponenter som skal brukes som vue-komponent. For eksempel kan en knapp opprettes ved hjelp av 'vue-materialet' som dette.

Hoved

For å vite om ytterligere komponenter, kan du gjerne besøke den offisielle å komme i gang med vue -materiale.

Dette er hvor enkelt det er å installere og begynne å bruke Vue -materiale 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 fremskynde utviklingsprosessen og forskjønne webapplikasjonen vår til de høyeste grensene.