وأخيييرا
بعد طول انتظار تنطلق سلسلة كاملة لشرح Vuejs بشكل مبسط وجميل!
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ
ما معنى Vue؟
شايفين الشاب الوسيم ده ؟
الشاب ده اسمه Evan You
الحقيقة أن الأخ Evan هو صيني آخر يغزو العالم باختراعه العجيب Vue!
أصابه الملل قليلا من Angular.js وهو فريموورك آخر كان يستخدمه
في الواقع هو قرر أن يجعل vue عبارة عن progressive framework مما يسهل على المبرمج التعامل مع ربط البيانات
data-binding، وأيضا الـapproachability أو طريقة حل الأكواد بطرق أسرع من Angular وحتى React!
إذا كنت لا تعلم أي شيء عن الفريمووركات أو أطر العمل، فلا مشكلة! أنت في المكان الصحيح!
المتطلبات:
- أساسيات HTML / CSS / JavaScript وفقط … آه والله
الأدوات اللازمة
فقط سنحتاج الى منصة nodejs التي تستخدم محرك جافاسكريبت v8 الخاص بـgoogle chrome لاستخدامه خارج المتصفح في عدة مميزات مثل تنصيب الفريموورك والمكتبات التي نحتاجها وأيضا انشاء سيرفر مباشر وغيرها (مرحلة متقدمة سنتناولها لاحقا)
والآن الخطوات
سأفترض أننا سنعمل على windows operating system
الخطوة الأولى -- تثبيت nodejs
سنقوم بتثبيت nodejs لكن لن نستخدمه الآن، سنحتاجه لاحقا عند التثبيت المتقدم ل vue-cli مع webpack
هذا الرابط سيأخذك لصفحة تحميل الـnodeJs
سأقوم بتنزيل النسخة المستقرة حاليا:
قم بتشغيل الملف واتبع التعليمات
الآن يمكننا التأكد من نسخة node الحالية باستخدام الـterminal (يمكنك استخدام $git bash أو من الـ windows terminal)
ثم نكتب الأمر 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 لديك
الآن نحن جاهزون تماما لكتابة ما نريد في الورشة القادمة بإذن الله
والآن مع الفيديو:
تم تحديث تقنية الفيديو
شكراً لمجهودك
