Vue.js põhitõed. Kuidas selle raamistikuga alustada?

Kuidas alustada Vue.jsiga?

Kõige soovitatavam viis luua Vue.js projekt on Vue CLI. Selle installimiseks tuleb lihtsalt kirjutada:

npm install -g @vue/cli


ja seejärel looge projekt:

vue create simple-project
 cd ./simple-project

Lõpuks saate oma projekti käivitada:

npm run serve

Loo lihtne komponent

Tänu webpackile ja vue-loader pluginale saame luua komponente .vue failid. Iga komponent sisaldab mall HTML-vaatega, käsikiri loogika ja stiil CSS-stiilis.

Loome lihtsa VArticle.vue komponent simple-project/src/components/VArticle.vue faili ja järgmise sisuga:

<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>
</>

Et kasutada eelnevalt loodud komponenti, peame seadistama simple-project/src/App.vue faili sisu:

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

Nüüd, kui avate brauseri http://localhost:8080/ peaksite nägema sellist ekraani:

Mis saab edasi?

Selles õpetuses olen püüdnud teile näidata, kuidas alustada oma seiklust Vue raamistikuga. Kui olete uudishimulik, kuidas luua keerukamaid komponente, leiate need kindlasti meie avatud lähtekoodiga vuelendar projekt.