Vue.js βασικό σεμινάριο. Πώς να ξεκινήσετε με αυτό το πλαίσιο;

Πώς να ξεκινήσετε με το Vue.js;

Ο πιο συνιστώμενος τρόπος για να δημιουργήσετε το Vue.js έργο είναι Vue CLI. Για να το εγκαταστήσετε απλά πληκτρολογήστε:

npm install -g @vue/cli


και στη συνέχεια δημιουργήστε ένα έργο:

vue create simple-project
 cd ./simple-project

Τέλος, μπορείτε να εκτελέσετε το έργο σας:

npm run serve

Δημιουργήστε ένα απλό συστατικό

Χάρη στο webpack και το vue-loader plugin μπορούμε να δημιουργήσουμε συστατικά σε .vue αρχεία. Κάθε στοιχείο περιλαμβάνει το πρότυπο με μια προβολή HTML, ένα σενάριο με λογική και στυλ με CSS styling.

Ας δημιουργήσουμε απλά VArticle.vue συστατικό σε simple-project/src/components/VArticle.vue και το ακόλουθο περιεχόμενο:

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

Για να χρησιμοποιήσουμε ένα ήδη δημιουργημένο συστατικό πρέπει να ορίσουμε simple-project/src/App.vue το περιεχόμενο του αρχείου σε:

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

Τώρα όταν ανοίγετε ένα πρόγραμμα περιήγησης στο http://localhost:8080/ θα πρέπει να δείτε μια οθόνη όπως:

Τι ακολουθεί;

Σε αυτό το σεμινάριο, προσπάθησα να σας δείξω πώς να ξεκινήσετε την περιπέτειά σας με το πλαίσιο Vue. Αν είστε περίεργοι για το πώς να δημιουργήσετε πιο προηγμένα στοιχεία, θα τα βρείτε σίγουρα στο ανοιχτό μας λογισμικό vuelendar έργο.