Výukový kurz základů Vue.js. Jak začít s tímto frameworkem?

Jak začít s Vue.js?

Nejdoporučovanější způsob vytvoření Vue.js projekt je Vue CLI. Pro instalaci stačí zadat:

npm install -g @vue/cli


a poté vytvořte projekt:

vue create simple-project
 cd ./simple-project

Nakonec můžete projekt spustit:

npm run serve

Vytvoření jednoduché komponenty

Díky WebPacku a zásuvnému modulu vue-loader můžeme vytvářet komponenty v. .vue soubory. Každá komponenta obsahuje šablona se zobrazením HTML, scénář s logikou a styl pomocí stylování CSS.

Vytvořme jednoduchý VArticle.vue složka v simple-project/src/components/VArticle.vue a následující obsah:

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

Chceme-li použít dříve vytvořenou komponentu, musíme nastavit simple-project/src/App.vue obsah souboru do:

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

Když nyní otevřete prohlížeč na http://localhost:8080/ měla by se zobrazit následující obrazovka:

Co bude dál?

V tomto návodu jsem se vám pokusil ukázat, jak začít dobrodružství s rámcem Vue. Pokud vás zajímá, jak vytvářet pokročilejší komponenty, určitě je najdete v našem open source programu. vuelendar projekt.