Vue.js Grundlagen-Tutorial. Wie beginnt man mit diesem Framework?

Wie beginnt man mit Vue.js?

Der empfehlenswerteste Weg zur Erstellung der Vue.js Projekt ist Vue CLI. Um es zu installieren, geben Sie einfach ein:

npm install -g @vue/cli


und erstellen Sie dann ein Projekt:

vue create simple-project
 cd ./simple-project

Schließlich können Sie Ihr Projekt starten:

npm run serve

Erstellen Sie eine einfache Komponente

Dank webpack und vue-loader plugin können wir Komponenten in .vue Dateien. Jede Komponente enthält die Vorlage mit einer HTML-Ansicht, ein Skript mit Logik und Stil mit CSS-Styling.

Erstellen wir einfache VArtikel.vue Bauteil in einfach-projekt/src/komponenten/VArtikel.vue Datei und den folgenden Inhalt:

<div class="article">
<h1 class="article__title">(( artikel.titel ))</h1>
<p><span class="article__author"><br>(( artikel.autor ))<br></span></p>
<p class="article__lead">(( Artikel.Lead ))</p>
</div>
</>

Um eine zuvor erstellte Komponente zu verwenden, müssen wir die einfaches-projekt/src/App.vue Inhalt der Datei an:

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

Wenn Sie nun einen Browser öffnen auf http://localhost:8080/ sollten Sie einen Bildschirm wie diesen sehen:

Was kommt als Nächstes?

In diesem Tutorial habe ich versucht, Ihnen zu zeigen, wie Sie Ihr Abenteuer mit dem Vue-Framework beginnen können. Wenn Sie neugierig sind, wie Sie fortgeschrittenere Komponenten erstellen können, finden Sie diese sicherlich in unserem Open Source vuelendar Projekt.