Vue.js grunderna handledning. Hur börjar man med detta ramverk?

Hur börjar man med Vue.js?

Det mest rekommenderade sättet att skapa Vue.js projekt är Vue CLI. To install it just type:

npm installera -g @vue/cli


och sedan skapa ett projekt:

vue skapa enkelt projekt
 cd ./simple-project

Slutligen kan du köra ditt projekt:

npm kör servera

Skapa en enkel komponent

Tack vare webpack och vue-loader plugin kan vi skapa komponenter i .vue filer. Varje komponent innehåller mallen med en HTML-vy, ett manus med logik och stil med CSS-styling.

Låt oss skapa en enkel VArtikel.vue komponent i simple-project/src/komponenter/VArticle.vue fil, och följande innehåll:

<div class="article">
<h1 class="article__title">(( artikel.titel ))</h1>
<p><span class="article__author"><br>(( artikel.författare ))<br></span></p>
<p class="article__lead">(( artikel.bly ))</p>
</div>
</>

För att använda en tidigare skapad komponent måste vi ställa in simple-project/src/App.vue filinnehåll till:

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

När du nu öppnar en webbläsare på http://localhost:8080/ bör du se en skärm som:

Vad händer härnäst?

I den här handledningen har jag försökt visa dig hur du börjar ditt äventyr med Vue-ramverket. Om du är nyfiken på hur du skapar mer avancerade komponenter hittar du dem säkert i vår öppna källkod vuelkalender projekt.