البرنامج التعليمي لأساسيات Vue.js. كيف تبدأ مع هذا الإطار؟

كيف تبدأ مع Vue.js؟

الطريقة الموصى بها لإنشاء Vue.js المشروع هو Vue CLI. لتثبيته اكتب فقط

npm install -g @vue/cli


ثم قم بإنشاء مشروع:

vue إنشاء مشروع بسيط
 قرص مضغوط ./ مشروع بسيط

وأخيراً، يمكنك تشغيل مشروعك:

npm تشغيل الخدمة

إنشاء مكون بسيط

بفضل webpack والمُلحق vue-loader يمكننا إنشاء مكونات في فيو الملفات. يتضمن كل مكون القالب مع عرض HTML, نص بالمنطق و النمط بتصميم CSS.

لنقم بإنشاء مقالة.vue.vue المكوِّن في Simple-project/src/components/VA-prorticle.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">(( مقالة.الرصاص ))</p>
</div>
</>

لاستخدام مكوّن تم إنشاؤه مسبقًا نحتاج إلى تعيين مشروع بسيط/مشروع بسيط/سرك/تطبيق.فيو محتوى الملف إلى:

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

الآن عند فتح متصفح على http://localhost:8080/ يجب أن ترى شاشة مثل:

ما التالي؟

في هذا البرنامج التعليمي، حاولت في هذا البرنامج التعليمي أن أوضح لك كيفية بدء مغامرتك مع إطار عمل Vue. إذا كنت مهتمًا بمعرفة كيفية إنشاء مكونات أكثر تقدمًا، ستجدها بالتأكيد في فويلندار المشروع.