دروس الفريموورك Vue.js [درس#1 تثبيت الأدوات]


وأخيييرا :tada::confetti_ball::smiley: بعد طول انتظار تنطلق سلسلة كاملة لشرح Vuejs بشكل مبسط وجميل!

قبل البداية:

  • الدروس ستكون مكتوبة بالخطوات
  • يوجد شرح فيديو بالأسفل مع كل درس
  • يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة :flight_departure::rocket::flying_saucer::airplane:

فهرس الدروس
  1. درس#1 تثبيت الأدوات
  2. درس#2 Vue instance
  3. درس#3 data & methods
  4. درس#4 Data Binding
  5. درس#5 events & event modifiers
  6. درس#6 keyboard modifiers
  7. درس#7 two-way data binding
  8. درس#8 ورشة عمل تسجيل دخول

يلا نبدأ :smiley:

ما معنى Vue؟

شايفين الشاب الوسيم ده :smiley: ؟

evan
الشاب ده اسمه Evan You
الحقيقة أن الأخ Evan هو صيني آخر يغزو العالم باختراعه العجيب Vue!

أصابه الملل قليلا من Angular.js وهو فريموورك آخر كان يستخدمه :smiley:
images

في الواقع هو قرر أن يجعل vue عبارة عن progressive framework مما يسهل على المبرمج التعامل مع ربط البيانات
data-binding، وأيضا الـapproachability أو طريقة حل الأكواد بطرق أسرع من Angular وحتى React!

إذا كنت لا تعلم أي شيء عن الفريمووركات أو أطر العمل، فلا مشكلة! أنت في المكان الصحيح!

المتطلبات:

  • أساسيات HTML / CSS / JavaScript وفقط :smiley:آه والله :smiley:

الأدوات اللازمة

فقط سنحتاج الى منصة nodejs التي تستخدم محرك جافاسكريبت v8 الخاص بـgoogle chrome لاستخدامه خارج المتصفح في عدة مميزات مثل تنصيب الفريموورك والمكتبات التي نحتاجها وأيضا انشاء سيرفر مباشر وغيرها (مرحلة متقدمة سنتناولها لاحقا)

والآن الخطوات

سأفترض أننا سنعمل على windows operating system

الخطوة الأولى -- تثبيت nodejs

سنقوم بتثبيت nodejs لكن لن نستخدمه الآن، سنحتاجه لاحقا عند التثبيت المتقدم ل vue-cli مع webpack

هذا الرابط سيأخذك لصفحة تحميل الـnodeJs
سأقوم بتنزيل النسخة المستقرة حاليا:

قم بتشغيل الملف واتبع التعليمات :rocket: :rocket: :smiley:
الآن يمكننا التأكد من نسخة node الحالية باستخدام الـterminal (يمكنك استخدام $git bash أو من الـ windows terminal)
git
ثم نكتب الأمر node -v كما بالشكل:

الخطوة الثانية -- تثبيت Vue.js

سأتناول في هذا القسم الطريقة السهلة فقط عن طريق CDN أو Content Delivering Network
وسنطبق معا بعض الأشياء عن أسرار Vue

ملحوظة : توجد الطريقة المتقدمة: تثبيت vue-cli مع webpack لتوفير خواص تجميع الكود وتسريع الـdevelopment
سنتناولها لاحقا حينما يتسنى لنا معرفة بعض اسرار عمل vue

كما بالصورة أنشأت ملف فارغ بداخله فقط index.html


يمكننا فتح المحرر ونسخ الكود التالي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>VueJS Coretabs</title>
</head>
<body>
  
</body>
</html>

الآن من الموقع الرسمي يمكننا جلب مكتبة vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
وإضافتها للكود

  • هيا نضيف أيضا ملف للـCSS

الشكل النهائي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>VueJS Coretabs</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  
</body>
</html>

لا تنسى التأكد من انشاء ملف الـCSS لديك

الآن نحن جاهزون تماما لكتابة ما نريد في الورشة القادمة بإذن الله :smiley:

والآن مع الفيديو:


تم تحديث تقنية الفيديو

الدرس الثاني:

سلسلة دروس عمل الفريموورك Vue.js [درس#2 Vue instance]

6 Likes

ما شاء الله عليك يا نصر
بارك الله فيك و جزاك الله خيرا و زادك علما نافعا

3 Likes

مساهمة رائعة ي نصر :star_struck: شكراً لمجهودك

3 Likes

أسأل الله المولى عزوجل أن تستمر وان يوفقك في هذه السلسلة :heart_eyes::heart_eyes::heart_eyes:

2 Likes

وجزاك المثل وزيادة صديقي

2 Likes

تلميذك أستاذ محمد :star_struck:

آمين يارب

2 Likes

تم إضافة الورشة الثانية

3 Likes

يعطيك العافيه شرح جميل، في انتظار باقي الورشات.
بما أن اهتمامي بالفرونت اند زاد كثيراً المدة الأخيرة راح اتابع الورشات ورشة ورشة :muscle:t2::muscle:t2:

1 Like

شرف ليا :slight_smile:

1 Like

@makhlouf
@Alhakem
@MosaabLaboune
@TChiOfficiel
تم تحديث تقنية الفيديو
مشاهدة ممتعة!

2 Likes