تعلم Vue: دورة برمجة
تعلم Vue: دورة برمجة — تعلّم Vue.js من خلال بناء المكوّنات على هاتفك
تعلم Vue: دورة برمجة هو تطبيق مجاني للبدء على iOS وAndroid، يعلّم Vue.js للمبتدئين الذين يعرفون قليلًا من HTML وJavaScript، وللمطورين الذين ينتقلون من Options API إلى Composition API. يضم 42 دورة و156 درسًا، بدءًا من أول قالب لك وصولًا إلى Pinia وVue Router وNuxt 3، كما تُجمَّع المكوّنات أحادية الملف على جهازك — لذلك تعمل المشاريع الإرشادية العشرون والمهام وVue Lab من دون خادم.
- السعر
- مجاني، مع ترقية Pro
- المنصات
- iOS وAndroid
- اللغات
- 22
- التصنيف العمري
- 4+
- الإصدار
- 82.6.0
- يتطلب
- iOS 15.1 أو أحدث
- App Store
- 3.0 ★ (2)
يصبح فهم المكوّن أسهل بعد أن تفكّكه.
يقدّم لك Vue Lab كل يوم مكوّنًا معطّلًا ويطلب منك العثور على الخطأ، ويتيح لك تعديل props الخاصة بالمكوّن باستخدام عناصر تحكم مباشرة، ويعرض كيف تتغير الحالة عند النقر. تُجمَّع المكوّنات أحادية الملف على الهاتف، لذلك يتعطّل العرض الأولي ويُصلَح أمامك، مع بطاقة خطأ توضّح ما الذي حدث.
ما هو
تعلم Vue: دورة برمجة هو تطبيق مجاني على iOS وAndroid يعلّم Vue.js من خلال 42 دورة و156 درسًا، بدءًا من صياغة القوالب وربط البيانات، مرورًا بـ Composition API وPinia وVue Router وTypeScript، وصولًا إلى Nuxt 3 واختبار التطبيقات باستخدام Vitest وبناء تطبيقات full-stack. تُجمَّع المكوّنات أحادية الملف على الجهاز، لذلك تعمل المشاريع الإرشادية والمهام البرمجية وVue Lab عمليًا على الهاتف من دون خادم، كما يشرح مرشد AI في Pro الشيفرة والأخطاء.
داخل التطبيق
كيف يبدو
الدورة
ما الذي تغطيه دورة Vue
42 دورة و156 درسًا من قائمة الدورات الخاصة بالتطبيق، بدءًا من أول قالب ووصولًا إلى العرض من جهة الخادم وأنماط الإنتاج.
البدء مع Vue.js
مقدمة إلى Vue.js وVue CLI وبنية المشروع، وصياغة القوالب وربط البيانات.
التفاعلية وComposition API
أساسيات Vue 3 Composition API، وصياغة script setup، والتفاعلية والخصائص المحسوبة، وتوجيهات Vue.
المكوّنات والنماذج
أساسيات المكوّنات وطرق التواصل بينها، وslots، وprovide وinject، والنماذج والتحقّق، ودورة حياة المكوّن.
إعادة الاستخدام والصقل
composables في Vue 3، والانتقالات والتحريكات، ومعالجة الأخطاء، ودوال العرض وJSX.
إدارة الحالة والتوجيه
إدارة الحالة باستخدام Pinia، وVuex، والتوجيه باستخدام Vue Router وأنماط التوجيه المتقدمة، والتعامل مع واجهات API والبيانات غير المتزامنة.
TypeScript وi18n والأدوات
استخدام TypeScript مع Vue 3، والتدويل، والتكامل مع Storybook، ونشر تطبيقات Vue وصيانتها.
Nuxt 3 والاختبار والتطبيقات الفورية
العرض من جهة الخادم باستخدام Nuxt 3، واختبار المكوّنات باستخدام Vitest، وGraphQL باستخدام Apollo، وبناء تطبيقات فورية باستخدام WebSockets.
أنماط الإنتاج
الأداء، وأفضل ممارسات الأمان، وتطوير الإضافات، ونشر مكتبة مكوّنات، وتطبيقات الويب التقدمية، والواجهات الأمامية المصغّرة.
كيف يعمل
كيف يتم تعلّم Vue في التطبيق
كل دورة مصنّفة حسب المستوى، وكل درس بعد الدورة الأولى المجانية يبدأ بمعاينة مجانية، حتى تتمكن من معرفة شكل الموضوع قبل أن تقرر التعمق فيه.
ابدأ بدورة Introduction to Vue.js
الدورة الأولى مجانية، وتبدأ بالتعريف بماهية Vue، وإعداد البيئة، وبناء تطبيق Hello Vue. تحمل الدورات تصنيفات من A1 إلى C1، لذلك يتضح من أين تبدأ وما الذي يأتي بعد ذلك.
أنشئ المكوّنات وشغّلها على الهاتف
عدّل مكوّنًا أحادي الملف وشاهده في المعاينة فورًا. تنمو المشاريع الإرشادية خطوةً تلو الأخرى، ويتيح لك App Studio إنشاء تطبيقات متعددة الشاشات باستخدام router وstore انطلاقًا من مخططات جاهزة.
تدرّب في Vue Lab
ابحث عن خطأ اليوم، وطابق تصميمًا مستهدفًا في Style Lab، وسابق الزمن في مواجهات speed-build، أو أعد كتابة مكوّن من Options API بأسلوب Composition.
ماذا يتضمن
ما الذي يقدّمه التطبيق
42
دورات، 156 درسًا
بدءًا من صياغة القوالب والتوجيهات، مرورًا بدورة حياة المكوّنات وslots وprovide وinject وcomposables، وصولًا إلى Nuxt 3 وGraphQL وPWAs وmicro-frontends.
20
مشاريع إرشادية
طوّر تطبيقًا خطوةً تلو الأخرى، باستخدام مكوّنات أحادية الملف تُجمَّع مباشرةً على جهازك، وبطاقة خطأ عند تعطل المعاينة.
28
مهام برمجية
تمارين تتدرج من السهل إلى الصعب، إضافةً إلى مخططات App Studio لإنشاء تطبيقات متعددة الشاشات باستخدام router وstore.
المختبر
Vue Lab
أداة لفحص التفاعلية، وتحدٍّ يومي للعثور على الأخطاء، و12 مستوى في Style Lab، ومواجهات speed-build، وساحة تدريب للتحويل من Options API إلى Composition API، ومكتبة My Components يمكنك مشاركتها في بطاقة على شكل صورة.
المقابلات
أسئلة مقابلات Vue
أسئلة لمقابلات مطوري الواجهة الأمامية، مع اختبارات قصيرة وجلسات مراجعة باستخدام البطاقات التعليمية وورقة غش يمكنك فتحها في أي وقت.
AI
مرشد AI (Pro)
اطرح سؤالًا عن مفهوم أو خطأ، واحصل على شرح لشيفرتك، أو أنشئ درسًا مخصصًا حول أي موضوع تريد دراسته.
معلومات أساسية
ما هو Vue.js، وما أول ما ينبغي للمبتدئ تعلّمه؟
Vue هو إطار عمل JavaScript لبناء واجهات ويب تفاعلية من مكوّنات: أجزاء صغيرة قابلة لإعادة الاستخدام، يمتلك كل منها قدرًا من القالب والمنطق والتنسيق. تكمن جاذبيته للمبتدئين في سهولة البدء به، إذ يمكنك الانطلاق من HTML عادي وقليل من JavaScript ثم إضافة البنية تدريجيًا. والترتيب المنطقي هو تعلّم القوالب وربط البيانات، ثم التفاعلية والمكوّنات، ثم Composition API، وبعد ذلك فقط التوجيه وإدارة الحالة والعرض على الخادم.
التفاعليةالفكرة المحورية
تغيّر جزءًا من البيانات، فتتحدّث الشاشة التي تعتمد عليه تلقائيًا. إن فهم القيم التفاعلية، وما تضيفه الخصائص المحسوبة والمراقبات، يزيل معظم الالتباس المبكر في Vue.
Options API وComposition APIطريقتان لكتابة مكوّن
تجمع Options API الأقدم الشيفرة حسب النوع، مثل data وmethods. أما Composition API مع script setup فتجمعها حسب الميزة، وتجعل إنشاء composables قابلة لإعادة الاستخدام أمرًا سهلًا. لا تزال العديد من الدروس وقواعد الشيفرة تستخدم الطريقتين، لذا تُعدّ قراءة أيٍّ منهما مهارة مفيدة.
Pinia وVuex وrouterما الذي يضيفه التطبيق الحقيقي
عندما يضم التطبيق عدة شاشات، فإنه يحتاج إلى routing للتنقل بينها، وإلى مخزن مشترك للبيانات التي تستخدمها أكثر من مكوّن. تُعدّ Pinia المخزن الحالي لـVue، بينما Vuex هو المخزن الأقدم الذي لا تزال تستخدمه العديد من المشاريع القائمة.
Nuxt والعرض على الخادمعندما يهمّ البحث والسرعة
يعتمد Nuxt على Vue لعرض الصفحات على الخادم، مما يساعد على تسريع التحميل الأول وتحسين الظهور في نتائج البحث. وعادةً ما يكون هذا موضوعًا للمرحلة الثانية، بعد إتقان المكوّنات والتوجيه والحالة.
الملاءمة
لمن يناسب — ولمن لا يناسب
يناسبك إذا كنت
- تعرف قليلًا من HTML وJavaScript وتريد تعلّم أول إطار عمل لك
- تنتقل من Options API إلى Composition API، أو من Vuex إلى Pinia
- تستعد لمقابلة لوظيفة مطوّر Vue.js أو لوظيفتك الأولى في تطوير الواجهات الأمامية
- تتعلّم بصورة أفضل عبر إصلاح مكوّن معطّل بدلًا من القراءة عنه
- تريد جلسات قصيرة يمكنك استغلالها أثناء تنقّلك
ليس الأداة المناسبة لك إذا كنت
- لم يسبق لك استخدام HTML أو JavaScript — ابدأ بدورة JavaScript أولًا
- تريد إطلاق تطبيق إنتاجي من هاتفك — لكن الحاسوب المحمول يظل المكان المناسب لذلك
- تتوقع أن يكون كل شيء مجانيًا: الدورة الأولى والمعاينات مجانية، بينما يفتح Pro المنهج الكامل
- تريد مواد رسمية من Vue.js — هذا تطبيق تعلّم مستقل
الأسئلة
الأسئلة الشائعة
ما أفضل طريقة لتعلّم Vue.js على الهاتف؟
تعلّم من خلال تشغيل المكوّنات بدلًا من الاكتفاء بالقراءة عنها. يترجم تعلم Vue: دورة برمجة المكوّنات أحادية الملف على الجهاز، لذلك تعمل مشاريعه الإرشادية العشرون ومهماته الثماني والعشرون وVue Lab جميعًا على الهاتف. وتأخذك الدروس القصيرة عبر 42 دورة، من صياغة القوالب إلى Nuxt 3، مع دورة أولى مجانية للبدء.
هل يعلّم التطبيق Composition API وPinia؟
نعم. يضم تعلم Vue: دورة برمجة دورات عن أساسيات Vue 3 Composition API، وصياغة script setup، وcomposables، وإدارة الحالة باستخدام Pinia، بالإضافة إلى Vuex الأقدم للمشاريع الحالية. كما يتيح dojo بعنوان Options to Composition API في Vue Lab إعادة كتابة المكوّنات التقليدية بالأسلوب الحديث.
ما الفرق بين Options API وComposition API في Vue؟
تنظّم Options API شيفرة المكوّن حسب النوع، مثل data وmethods وcomputed، بينما تنظّم Composition API باستخدام script setup الشيفرة حسب الميزة، وتسهّل إنشاء composables قابلة لإعادة الاستخدام. يعلّم تعلم Vue: دورة برمجة Composition API باستخدام script setup، ويتضمن dojo بعنوان Options to Composition API في Vue Lab لإعادة كتابة المكوّنات التقليدية بالأسلوب الحديث.
هل أحتاج إلى معرفة JavaScript قبل تعلّم Vue؟
تساعدك معرفة القليل من HTML وJavaScript كثيرًا. يستهدف تعلم Vue: دورة برمجة المبتدئين الذين يعرفون الأساسيات ويريدون تعلّم إطار عملهم الأول، لذلك يشرح مفاهيم Vue من البداية، لكنه لا يعلّم JavaScript نفسه. إذا كانت المتغيرات والدوال جديدة عليك، فعليك البدء بدورة JavaScript أولًا.
ما هو Vue Lab؟
Vue Lab هي مساحة التدريب في تعلم Vue: دورة برمجة. وتضم أداة لفحص التفاعلية، وتحدّيًا يوميًا للعثور على الأخطاء في مكوّن معطّل، ومستويات Style Lab التي تطابق فيها تصميمًا مستهدفًا باستخدام CSS، ومواجهات speed-build، وdojo بعنوان Options to Composition API، ومكتبة My Components لما أنشأته.
هل يغطي Nuxt 3 والعرض من جهة الخادم؟
نعم. تغطي الدورات المتقدمة في تعلم Vue: دورة برمجة العرض من جهة الخادم باستخدام Nuxt 3، والبث عبر SSR باستخدام Suspense، وتطوير Vue متكاملًا باستخدام Fastify والمصادقة، إلى جانب اختبار المكوّنات باستخدام Vitest والتطبيقات الفورية باستخدام WebSockets.
هل يساعد في مقابلات Vue.js؟
نعم. يتضمن تعلم Vue: دورة برمجة أسئلة مقابلات Vue لوظائف مطوّري الواجهات الأمامية، إلى جانب الاختبارات وجلسات مراجعة البطاقات التعليمية وورقة الغش. وتغطي الدورات التي تستند إليها هذه المواد التفاعلية والتفاعلية ودورة الحياة وcomposables وإدارة الحالة، وهي موضوعات شائعة في المقابلات.
هل تعلم Vue: دورة برمجة مجاني؟
يمكن تنزيله مجانًا. الدورة الأولى، ومعاينة كل درس، والمشروع الإرشادي الأول، والمهمة الأولى، وتحدّي العثور على الأخطاء اليومي، وثلاثة مستويات من Style Lab، والاختبارات، وأسئلة المقابلات، وورقة الغش كلها مجانية، بينما يعرض الإصدار المجاني إعلانات. يفتح Pro المنهج الكامل وVue Lab، ومرشد الذكاء الاصطناعي، وامتحان الشهادة، كما يزيل الإعلانات.
هل أُنشئ التطبيق بواسطة فريق Vue.js؟
لا. تعلم Vue: دورة برمجة هو تطبيق تعلّم مستقل، ولا يرتبط بمشروع Vue.js أو يحظى بتأييده. وهو يعلّم Vue.js باعتباره إطار عمل مفتوح المصدر من خلال دوراته وتمارينه الخاصة.
هل توجد شهادة؟
نعم. يتيح لك اجتياز الاختبار النهائي، المتاح ضمن Pro، الحصول على شهادة إتمام. وهي تُظهر العمل الذي أنجزته، وليست مؤهلًا معتمدًا، لذا تكون أنسب إلى جانب مكوّنات ومشاريع يمكنك شرحها.
ما المنصات واللغات التي يدعمها؟
يعمل تعلم Vue: دورة برمجة على iPhone من خلال App Store (iOS 15.1 أو أحدث)، وعلى Android من خلال Google Play. تتوفر الواجهة بـ 22 لغة، ويحمل التطبيق تصنيف 4+ على App Store.
ابدأ الآن
أنشئ أول مكوّن Vue لك اليوم
ابدأ مجانًا على iOS وAndroid، وبـ 22 لغة.
المزيد من CoddyKit
متاح على iOS و Android.