Samouczek dotyczący podstaw Vue.js. Jak zacząć pracę z tym frameworkiem?

Jak rozpocząć pracę z Vue.js?

Najbardziej zalecany sposób tworzenia Vue.js projekt jest Vue CLI. Aby go zainstalować wystarczy wpisać:

npm install -g @vue/cli


a następnie utworzyć projekt:

vue create simple-project
 cd ./simple-project

Na koniec można uruchomić projekt:

npm run serve

Utwórz prosty komponent

Dzięki webpack i wtyczce vue-loader możemy tworzyć komponenty w formacie .vue pliki. Każdy komponent zawiera szablon z widokiem HTML, scenariusz z logiką i styl ze stylizacją CSS.

Stwórzmy proste VArticle.vue komponent w simple-project/src/components/VArticle.vue i następującą zawartość:

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

Aby użyć wcześniej utworzonego komponentu, musimy ustawić simple-project/src/App.vue zawartość pliku do:

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

Teraz po otwarciu przeglądarki na http://localhost:8080/ Powinien pojawić się następujący ekran:

Co dalej?

W tym samouczku starałem się pokazać, jak rozpocząć przygodę z frameworkiem Vue. Jeśli jesteś ciekawy, jak tworzyć bardziej zaawansowane komponenty, z pewnością znajdziesz je w naszym otwartym źródle kalendarz projekt.