Vue.js grunnleggende opplæring. Hvordan starte med dette rammeverket?

Hvordan komme i gang med Vue.js?

Den mest anbefalte måten å opprette Vue.js prosjekt er Vue CLI. For å installere det skriver du bare inn:

npm install -g @vue/cli


og deretter opprette et prosjekt:

vue create simple-project
 cd ./simple-project

Til slutt kan du kjøre prosjektet ditt:

npm run serve

Opprett en enkel komponent

Takket være webpack og vue-loader-plugin kan vi lage komponenter i .vue filer. Hver komponent inneholder malen med en HTML-visning, et manus med logikk og stil med CSS-styling.

La oss lage enkle VArticle.vue komponent i simple-project/src/components/VArticle.vue filen, og følgende innhold:

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

For å bruke en tidligere opprettet komponent må vi angi simple-project/src/App.vue filinnhold til:

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

Når du nå åpner en nettleser på http://localhost:8080/ bør du se et skjermbilde som dette:

Hva blir det neste?

I denne veiledningen har jeg forsøkt å vise deg hvordan du kan starte ditt eventyr med Vue-rammeverket. Hvis du er nysgjerrig på hvordan du lager mer avanserte komponenter, finner du dem sikkert i vår åpen kildekode vuelendar prosjekt.