Phenquestions
Materiaalontwerp is 's werelds populairste ontwerptaal, gebouwd door Google Inc. Het biedt een groot aantal componenten of ontwerpsjablonen om uw toepassing een materiële uitstraling te geven. Sommige op materiaalontwerp gebaseerde front-end-frameworks zijn gemaakt door de gemeenschap en gebruikt voor het maken van interactieve en intuïtieve webapplicaties. Dit bericht leert over de installatie van 'vue-materiaal' en leert het te gebruiken in de Vue.js-framework.
Vue Material is een op Google Material Design geïnspireerde bibliotheek die wordt gebruikt voor het bouwen van web-apps.
Installatie van Vue-materiaal
Vue-materiaalbibliotheek kan worden gebruikt als Vue-componenten in een Vue-project. Voordat u aan de slag gaat met de installatie van Vue-materiaal, wordt ervan uitgegaan dat u bekend bent met HTML, CSS en Javascript. Je hebt het Vue-project opgezet en je hebt een goede editor op je systeem geïnstalleerd, zoals VS-code. Als je het Vue-project nog niet hebt opgezet, kun je de onderstaande procedure volgen om snel een Vue-project op te zetten.
Vue-project instellen
Om het Vue-project op te zetten, controleert u eerst of Vue.js al dan niet op uw systeem is geïnstalleerd door de onderstaande opdracht te typen:
$ vue --versie
Als u het nog niet hebt geïnstalleerd, typt u de onderstaande opdracht om Vue te installeren.js wereldwijd op uw besturingssysteem:
$ npm install -g @vue/cli
Na het succesvol installeren van Vue.js globaal op uw besturingssysteem, maakt u het Vue-project door de onderstaande opdracht "vue create" te typen, gevolgd door de projectnaam:
$ vue maak vueprojectnaam
Het zal u vragen om de voorinstelling te selecteren of uw eigen aangepaste voorinstelling voor het Vue-project te selecteren.
Na het configureren of selecteren van de standaardvoorinstelling, wordt het Vue-project binnen een tijdje gemaakt.
Nadat u het Vue-project hebt gemaakt, navigeert u naar de map van het nieuw gemaakte project met behulp van de opdracht "cd".
$ cd vueprojectnaam
In dit stadium heb je het Vue-project succesvol opgezet.
Vue-materiaal installeren
Zodra uw systeem gereed is en het Vue-project is ingesteld! U kunt het "vue-materiaal" installeren met behulp van het garen of NPM.
Om 'vue-material' te installeren met behulp van de Yarn-pakketbeheerder, typt u de onderstaande opdracht:
$ garen voeg vue-materiaal toeOF
Om 'vue-material' te installeren met behulp van de NPM-pakketbeheerder, typt u de onderstaande opdracht:
$ npm installeer vue-materiaal --save
Oke! Zodra het 'vue-materiaal' is geïnstalleerd, moet u het in het algemeen inschakelen.js-bestand.
importeer VueMaterial uit 'vue-materiaal'importeer 'vue-material/dist/theme/default'.css'
importeer 'vue-materiaal/dist/vue-materiaal'.min.css'
Vue.gebruik(VueMateriaal)
Nadat je het "vue-materiaal" hebt ingeschakeld, kun je het nu gebruiken in je Vue-project.
Vue-materiaal gebruiken in Vue
Om Vue-materiaal met Vue te gebruiken, biedt 'vue-materiaal' verschillende componenten om als Vue-component te gebruiken. Er kan bijvoorbeeld een knop worden gemaakt met behulp van het 'vue-materiaal' zoals dit.
Voor meer informatie over verdere componenten, bezoek gerust de officiële startpagina van Vue Material.
Zo eenvoudig is het om Vue-materiaal te installeren en te gebruiken in een Vue-project.
Conclusie
Vue Material is een trendy materiaalontwerpcomponentenbibliotheek die wordt gebruikt voor het bouwen van web-apps. In dit bericht lopen we door de installatie van Vue Material in een Vue.js-project en zie hoe u het kunt inschakelen en gebruiken. Met de combinatie van zulke twee robuuste bibliotheken kunnen we het ontwikkelingsproces versnellen en onze webapplicatie tot de hoogste limieten verfraaien.
