Materiel design er verdens mest populære designsprog bygget af Google Inc. Det giver et stort antal komponenter eller designskabeloner for at give et materiale-look til din applikation. Nogle materiale-designbaserede frontend-rammer er oprettet af samfundet og bruges til at skabe interaktive og intuitive webapplikationer. Dette indlæg lærer om installationen af 'vue-material' og lærer at bruge det i Vue.js Framework.
Vue Material er et Google Material Design-inspireret bibliotek, der bruges til opbygning af webapps.
Installation af Vue-materiale
Vue-materialebibliotek kan bruges som Vue-komponenter i et Vue-projekt. Før du går i gang med installationen af Vue-materiale, antages det, at du er fortrolig med HTML, CSS og Javascript. Du har oprettet Vue-projektet, og du har installeret en god editor på dit system som VS-kode. Hvis du endnu ikke har oprettet Vue-projektet, kan du følge nedenstående procedure for hurtigt at oprette et Vue-projekt.
Opsæt Vue-projekt
For at konfigurere Vue-projektet skal du først kontrollere, om Vue.js er installeret på dit system eller ikke ved at skrive kommandoen nedenfor:
$ vue - version
Hvis du ikke har installeret det endnu, skal du skrive kommandoen nedenfor for at installere Vue.js globalt på dit operativsystem:
$ npm install -g @ vue / cli
Efter vellykket installation af Vue.js globalt på dit operativsystem, skal du oprette Vue-projektet ved at skrive kommandoen “vue create” nedenfor, efterfulgt af projektnavnet:
$ vue oprette vueprojectname
Det beder dig om enten at vælge forudindstillingen eller vælge din egen brugerdefinerede forudindstilling til Vue-projektet.
Efter konfiguration eller valg af standardindstillingen oprettes Vue-projektet om et stykke tid.
Når du har oprettet Vue-projektet, skal du navigere til det nyoprettede projektmappe ved hjælp af kommandoen “cd”.
$ cd vueprojectname
På dette tidspunkt har du oprettet Vue-projektet med succes.
Installer Vue-materiale
Når dit system er klar, og Vue-projektet er oprettet! Du kan installere “vue-materialet” ved hjælp af Garn eller NPM.
For at installere 'vue-material' ved hjælp af Yarn-pakkehåndtering skal du skrive kommandoen nedenfor:
$ garn tilføj visumaterialeELLER
For at installere 'vue-material' ved hjælp af NPM-pakkehåndtering skal du skrive kommandoen nedenfor:
$ npm install vue-material --save
I orden! Når 'vue-materialet' er installeret, skal du aktivere det i det væsentlige.js-fil.
importer VueMaterial fra 'vue-material'importer 'vue-material / dist / theme / default.css '
importer 'visumateriale / dist / visumateriale.min.css '
Vue.brug (VueMaterial)
Når du har aktiveret "visumaterialet", kan du nu bruge det i dit Vue-projekt.
Sådan bruges Vue-materiale i Vue
For at bruge Vue-materiale med Vue leverer 'vue-material' forskellige komponenter, der kan bruges som Vue-komponent. For eksempel kan en knap oprettes ved hjælp af 'visumaterialet' som dette.
For at vide om yderligere komponenter, er du velkommen til at besøge den officielle start-side af Vue Material.
Dette er, hvor enkelt det er at installere og begynde at bruge Vue Material i et Vue-projekt.
Konklusion
Vue Material er et trendy materialedesignkomponentbibliotek, der bruges til at opbygge webapps. I dette indlæg går vi gennem Vue Materials installation i en Vue.js projekt og se, hvordan du aktiverer det og bruger det. Med kombinationen af sådanne to robuste biblioteker kan vi fremskynde udviklingsprocessen og forskønne vores webapplikation til de højeste grænser.