Grundlæggende vejledning i Vue.js. Hvordan kommer man i gang med dette framework?

Hvordan kommer man i gang med Vue.js?

Den mest anbefalede måde at oprette Vue.js projekt er Vue CLI. For at installere det skal du bare skrive:

npm install -g @vue/cli


og opret derefter et projekt:

vue create simple-project
 cd ./simple-project

Til sidst kan du køre dit projekt:

npm run serve

Opret en simpel komponent

Takket være webpack og vue-loader-plugin kan vi oprette komponenter i .vue filer. Hver komponent indeholder skabelonen med en HTML-visning, et manuskript med logik og Stil med CSS-styling.

Lad os skabe enkle VArtikel.vue komponent i simple-project/src/components/VArticle.vue og følgende indhold:

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

For at bruge en tidligere oprettet komponent skal vi indstille simple-project/src/App.vue filens indhold til:

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

Når du nu åbner en browser på http://localhost:8080/ Du bør se en skærm som denne:

Hvad bliver det næste?

I denne vejledning har jeg forsøgt at vise dig, hvordan du starter dit eventyr med Vue-frameworket. Hvis du er nysgerrig efter at vide, hvordan du laver mere avancerede komponenter, kan du helt sikkert finde dem i vores open source vuelendar projekt.