Vue.js:n perusteet. Miten aloittaa tämän kehyksen kanssa?

Miten aloittaa Vue.js?

Suositeltavin tapa luoda Vue.js projekti on Vue CLI. Asenna se vain kirjoittamalla:

npm install -g @vue/cli


ja luo sitten projekti:

vue create simple-project
 cd ./simple-projekti

Lopuksi voit suorittaa projektin:

npm run serve

Luo yksinkertainen komponentti

Webpackin ja vue-loader-lisäosan ansiosta voimme luoda komponentteja vuonna .vue tiedostot. Jokainen komponentti sisältää malli HTML-näkymällä, käsikirjoitus logiikalla ja tyyli CSS-muotoilulla.

Luodaan yksinkertainen VArticle.vue komponentti simple-project/src/components/VArticle.vue tiedosto ja seuraava sisältö:

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

Käyttääksemme aiemmin luotua komponenttia meidän täytyy asettaa simple-project/src/App.vue tiedoston sisältö:

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

Nyt kun avaat selaimen http://localhost:8080/ sinun pitäisi nähdä seuraavanlainen näyttö:

Mitä seuraavaksi?

Tässä opetusohjelmassa olen yrittänyt näyttää, miten voit aloittaa seikkailun Vue-kehyksen kanssa. Jos olet utelias siitä, miten voit luoda kehittyneempiä komponentteja, löydät ne varmasti avoimen lähdekoodimme vuelendar hanke.