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. För att installera det skriver du bara:

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.