Vue.js basistutorial. Hoe begin je met dit framework?

Hoe te beginnen met Vue.js?

De meest aanbevolen manier om de Vue.js project is Vue CLI. Om het te installeren typ je gewoon:

npm install -g @vue/cli


en maak dan een project:

vue creëer eenvoudig-project
 cd ./simple-project

Tot slot kun je je project uitvoeren:

npm run serve

Een eenvoudig component maken

Dankzij webpack en de vue-loader plugin kunnen we componenten maken in .vue bestanden. Elk onderdeel bevat de sjabloon met een HTML-weergave, een script met logica en stijl met CSS-styling.

Laten we eenvoudige Artikel.vue component in simple-project/src/componenten/VArtikel.vue bestand en de volgende inhoud:

<div class="article">
<h1 class="article__title">(( article.title ))</h1>
<p><span class="article__author"><br>(( artikel.auteur ))<br></span></p>
<p class="article__lead">(( article.lead ))</p>
</div>
</>

Om een eerder gemaakt component te gebruiken, moeten we het volgende instellen eenvoudigproject/src/App.vue inhoud van het bestand naar:

<div>
<div>&nbsp;</div>
</div>
</>

Als je nu een browser opent op http://localhost:8080/ zou je een scherm als dit moeten zien:

Wat is de volgende stap?

In deze tutorial heb ik geprobeerd je te laten zien hoe je je avontuur kunt beginnen met het Vue framework. Als je nieuwsgierig bent naar hoe je meer geavanceerde componenten kunt maken, kun je die zeker vinden in onze open source 0200 project.