0Pricing
Vue Academy icon

Vue Academy

HTMLFrontendWebBeginner

أنشئ واجهات مستخدم تفاعلية وفعّالة باستخدام Vue.js من خلال Vue Academy.

🤖 مدعوم بالذكاء الاصطناعي📚 42 دورة👥 100,000+ متعلم⭐ تقييم 4.9
نظرة عامة على الدورة

Vue.js: إطار العمل التدريجي لبناء واجهات المستخدم الحقيقية

Vue.js هو إطار العمل JavaScript التدريجي المصمم لبناء واجهات مستخدم موجهة نحو المكونات — من عنصر واجهة تفاعلي واحد مدمج في صفحة موجودة إلى تطبيق معروض من جانب الخادم بالكامل باستخدام Nuxt. يجعل Composition API وإدارة التفاعلية الدقيقة والدعم الأول للفئة TypeScript اختيارًا عمليًا للمشاريع الجديدة والفرق التي تنتقل بعيدًا عن الواجهات الأمامية الأقدم. تغطي هذه المسار Vue 3 بشكل شامل، من بناء الجملة في القوالب إلى النشر في الإنتاج.

ما ستتعلمه

ستعمل من خلال Composition API وبناء جملة script setup، وتوجيهات Vue، والخصائص المحسوبة، وأساسيات التفاعلية. تغطي المسار التواصل بين المكونات، والفتحات، وprovide/inject، والمركبات للمنطق المشترك. ستدير حالة التطبيق باستخدام Pinia و Vuex، وتتعامل مع التوجيه باستخدام Vue Router بما في ذلك الأنماط المتقدمة، وتتحقق من صحة النماذج، وتستهلك APIs الباقية إلى جانب البيانات في الوقت الفعلي عبر WebSockets. تتناول الدورات اللاحقة دمج TypeScript والعولمة والعرض التوضيحي Storybook والاختبار باستخدام Vitest وتحسين الأداء والعرض من جانب الخادم باستخدام Nuxt 3 و GraphQL مع Apollo وتطبيقات الويب التقدمية وممارسات أمان Vue.

مسار التعلم

تمتد اثنتان وأربعون دورة من A1 إلى C1. تؤسس دورات A1 و A2 Vue CLI وبناء جملة القوالب والربط بالبيانات والتوجيهات والنماذج وأساسيات المكونات. تبني دورات B1 النظام البيئي الكامل: خطافات دورة الحياة والانتقالات و Pinia و Vuex و Vue Router و TypeScript و i18n والبيانات غير المتزامنة. يرفع B2 المستوى مع العرض من جانب الخادم عبر Nuxt 3 و GraphQL و WebSockets واختبار المكونات ودوال العرض و PWA ونشر مكتبة مكونات. تتناول دورات C1 النهائية معمارية micro-frontend وأنماط Composition API المتقدمة و SSR streaming مع Suspense وأداء Vue على نطاق واسع وتطبيق كامل المكدس المبني باستخدام Fastify والمصادقة.

كيفية عمله

تنقسم كل دورة إلى دروس قصيرة ومركزة تكملها في محرر الأكواد المدمج مع تعليقات فورية. متوفر مدرس ذكاء اصطناعي عند حاجتك إلى المساعدة، حتى تتمكن من المتابعة من خلال تمارين بناء الجملة وتحديات المكونات ومشاكل العمارة بالسرعة التي تناسبك دون مغادرة التطبيق.

ابدأ التعلم →

كيف ستتعلم

🎯
دروس تفاعلية
تمارين برمجة عملية مع ردود فعل فورية
🤖
معلم الذكاء الاصطناعي
احصل على مساعدة فورية من معلمنا الذكي عندما تعلق
💻
محرر مدمج
اكتب وشغّل الأكواد مباشرة في متصفحك
🏆
الشهادة
احصل على شهادة عند إكمالك للدورة
المنهج الدراسي

42 دورة

كل الدورات في مسار تعلم Vue Academy.

01

مقدمة إلى Vue.js

A13 دروس

ابدؤوا استخدام Vue.js بفهم ماهيته وإعداد بيئتكم وبناء أول تطبيق تفاعلي لكم

02

فهم Vue CLI وبنية المشروع

A13 دروسPRO

تعلّموا إنشاء هياكل مشاريع Vue باستخدام CLI، وافهموا بنية الملفات والأدوات التي يتم توليدها

03

صياغة القوالب وربط البيانات

A13 دروسPRO

أتقنوا صياغة القوالب التصريحية في Vue، بما يشمل الاستيفاء والتوجيهات والشروط والحلقات وعمليات الربط

04

أساسيات Composition API في Vue 3

A24 دروسPRO

انتقلوا من Options API إلى Composition API في Vue 3 باستخدام setup() وref وreactive لتطوير Vue الحديث

05

صياغة Script Setup في Vue 3

A24 دروسPRO

اكتبوا مكوّنات أوضح وأسهل استخدامًا باستخدام صياغة المختصرة في Vue 3

06

استكشاف توجيهات Vue بعمق

A24 دروسPRO

أتقنوا جميع توجيهات Vue المضمّنة وتعلّموا كتابة توجيهات مخصّصة خاصة بكم

07

النماذج والتحقق في Vue

A24 دروسPRO

ابنوا نماذج متينة باستخدام v-model والتحقق الأصلي ومكتبة VeeValidate

08

أساسيات المكوّنات والتواصل بينها

A23 دروسPRO

ابنوا مكوّنات Vue قابلة لإعادة الاستخدام واربطوا بينها باستخدام الخصائص والأحداث المخصّصة وSlots

09

التفاعلية والخصائص المحسوبة

A23 دروسPRO

افهموا نظام التفاعلية في Vue، واستخدموا الخصائص المحسوبة والمراقبات بفاعلية

10

دورة حياة مكوّنات Vue

B14 دروسPRO

أتقنوا خطافات دورة حياة المكوّنات في Vue 3، وافهموا توقيت تنفيذ كل مرحلة

11

الانتقالات والرسوم المتحركة في Vue

B14 دروسPRO

أضيفوا انتقالات سلسة للدخول والمغادرة ورسومًا متحركة للقوائم باستخدام و في Vue

12

Slots المتقدمة في Vue

B14 دروسPRO

أتقنوا Slots المسماة وSlots ذات النطاق ومحتوى Slot الديناميكي لبناء واجهات API للمكوّنات قابلة لإعادة الاستخدام بدرجة كبيرة

13

Provide وInject

B14 دروسPRO

شاركوا البيانات بين المكوّنات المتداخلة بعمق دون تمرير الخصائص تدريجيًا، باستخدام آلية provide/inject في Vue

14

Composables في Vue 3

B14 دروسPRO

اكتبوا منطقًا ذا حالة قابلًا لإعادة الاستخدام على هيئة Composables، وهو نمط إعادة استخدام الشيفرة الأساسي في Vue 3

15

معالجة الأخطاء في Vue

B14 دروسPRO

ابنوا تطبيقات Vue متينة باستخدام حدود أخطاء مناسبة وواجهات مستخدم بديلة ومعالجة عامة للأخطاء

16

إدارة الحالة باستخدام Pinia

B14 دروسPRO

استبدلوا Vuex بـ Pinia، مكتبة إدارة الحالة الرسمية في Vue 3، فهي أبسط وتعطي TypeScript الأولوية

17

TypeScript مع Vue 3

B14 دروسPRO

اكتبوا مكوّنات Vue 3 آمنة الأنواع بالكامل، مع خصائص وأحداث وComposables معرّفة الأنواع باستخدام TypeScript

18

تدويل Vue (i18n)

B14 دروسPRO

ابنوا تطبيقات Vue متعددة اللغات باستخدام vue-i18n v9 والتبديل بين اللغات والتعامل السليم مع صيغ الجمع

19

تكامل Vue مع Storybook

B14 دروسPRO

وثّقوا مكوّنات Vue وطوّروها بمعزل عن التطبيق باستخدام Storybook، مع كتابة القصص وعناصر التحكم التفاعلية

20

التوجيه باستخدام Vue Router

B13 دروسPRO

أضيفوا التنقّل من جانب العميل إلى تطبيقات Vue باستخدام Vue Router، بما يشمل المسارات والمعلمات وحواجز التنقّل

21

إدارة الحالة باستخدام Vuex

B13 دروسPRO

أديروا حالة التطبيق المشتركة باستخدام Vuex، بما يشمل الحالة والطفرات والإجراءات والمُستخرِجات والوحدات

22

التعامل مع واجهات API والبيانات غير المتزامنة

B13 دروسPRO

اجلبوا البيانات البعيدة وأديروها في تطبيقات Vue باستخدام Axios وخطافات دورة الحياة ومعالجة الأخطاء المتينة

23

نشر تطبيقات Vue وصيانتها

B13 دروسPRO

ابنوا تطبيقات Vue وانشروها وصونوها في بيئة الإنتاج باستخدام منصات الاستضافة وأدوات المراقبة

24

منظومة Vue وما بعدها

B14 دروسPRO

استكشفوا أدوات Vue المتطورة ووضع Vapor والأنماط الناشئة التي ترسم مستقبل تطوير Vue

25

الأنماط المتقدمة في Vue Router

B24 دروسPRO

أتقنوا ميزات Vue Router المتقدمة، مثل البيانات الوصفية للمسارات وسلوك التمرير والانتقالات والتنقّل البرمجي

26

التصيير من جانب الخادم باستخدام Nuxt 3

B24 دروسPRO

ابنوا تطبيقات Vue متكاملة باستخدام التوجيه القائم على الملفات والمسارات الخادمية وإمكانات SSR/SSG في Nuxt 3

27

Vue مع GraphQL وApollo

B24 دروسPRO

ادمجوا GraphQL في تطبيقات Vue باستخدام Apollo Client للاستعلامات وعمليات التغيير والاشتراكات الفورية

28

تطبيقات فورية باستخدام Vue وWebSockets

B24 دروسPRO

ابنوا تطبيقات Vue تتحدّث مباشرة باستخدام WebSockets وSocket.io للمحادثات ولوحات المعلومات والتعاون

29

اختبار المكوّنات باستخدام Vitest

B24 دروسPRO

اختبروا مكوّنات Vue بموثوقية باستخدام Vitest وVue Test Utils، مع المحاكاة وإعداد تقارير التغطية

30

تحسين الأداء في Vue

B23 دروسPRO

سرّعوا تطبيقات Vue باستخدام التحميل الكسول وتقسيم الشيفرة والحفظ المؤقت وتحليل اختناقات الأداء

31

اختبار تطبيقات Vue

B23 دروسPRO

اختبروا تطبيقات Vue باختبارات الوحدات باستخدام Vue Test Utils، وباختبارات شاملة من البداية إلى النهاية لتغطية كاملة

32

الأنماط المتقدمة وأفضل الممارسات

B23 دروسPRO

طبّقوا أنماط Vue المتقدمة، مثل Mixins والتوجيهات المخصّصة والإضافات وتنظيم المشاريع القابل للتوسع

33

دوال التصيير وJSX في Vue

B24 دروسPRO

تجاوزوا القوالب باستخدام دالة التصيير h() وJSX في Vue لإنشاء مكوّنات ديناميكية برمجية

34

تطبيقات الويب التقدمية باستخدام Vue

B24 دروسPRO

حوّلوا تطبيقات Vue إلى PWAs مع دعم العمل دون اتصال وعمال الخدمة وتثبيت يشبه تثبيت التطبيقات الأصلية

35

أفضل ممارسات أمان Vue

B24 دروسPRO

أمّنوا تطبيقات Vue ضد XSS وCSRF وثغرات الويب الأخرى باستخدام أنماط دفاع عملية

36

نشر مكتبات مكوّنات Vue

B24 دروسPRO

ابنوا مكتبات مكوّنات Vue القابلة لإعادة الاستخدام ووثّقوها وانشروها على npm باستخدام وضع المكتبة في Vite

37

تطوير إضافات Vue 3

B24 دروسPRO

أنشئوا إضافات Vue قابلة للتثبيت تضيف مكوّنات عامة وتوجيهات وComposables وإعدادات على مستوى التطبيق

38

Micro-Frontends باستخدام Vue

C14 دروسPRO

صمّموا تطبيقات Vue واسعة النطاق على هيئة Micro-Frontends مستقلة باستخدام Module Federation

39

أنماط Composition API المتقدمة

C14 دروسPRO

أتقنوا أنماط التفاعلية المتقدمة وآلات الحالة ومصانع Composables للتعامل مع تطبيقات Vue المعقدة

40

تحسين أداء Vue المتقدم

C14 دروسPRO

حلّلوا أداء تطبيقات Vue وحسّنوه باستخدام v-memo والتحميل الكسول وضبط النظام التفاعلي

41

البث من جانب الخادم وSuspense في Vue

C14 دروسPRO

طبّقوا البث عبر SSR وVue Suspense لتحميل الصفحات تدريجيًا وتحسين مؤشرات الويب الأساسية

42

Vue متكامل مع Fastify والمصادقة

C14 دروسPRO

ابنوا تطبيقًا متكاملًا جاهزًا للإنتاج، بواجهة Vue 3 الأمامية وخلفية Fastify ومصادقة JWT

الأسئلة الشائعة

الأسئلة الشائعة

هل دورة Vue Academy مجانية؟

نعم. يمكنك البدء في دورة Vue Academy مجانًا وإكمال دروسها التفاعلية بلا تكلفة. اشتراك PRO اختياري يفتح لك أدوات ذكاء اصطناعي متقدمة وشهادة قابلة للمشاركة.

هل أحتاج إلى خبرة سابقة لتعلم HTML؟

لا. تبدأ الدورة بالأساسيات وتنتقل تدريجيًا إلى مواضيع أكثر تقدمًا، لذا يمكنك البدء حتى بدون خبرة سابقة في HTML.

كيف ستتعلم HTML على CoddyKit؟

تتعلم من خلال العمل. دروس تفاعلية قصيرة تجمع بين شرح واضح وتمرين برمجة عملي يعمل في الوقت الفعلي، ومعلم ذكاء اصطناعي يعمل 24/7 يقدم مساعدة مخصصة عندما تعلق.

هل أحصل على شهادة عند إكمال Vue Academy؟

نعم. متعلمو PRO يمكنهم الخضوع لامتحان والحصول على شهادة إكمال قابلة للمشاركة برمز تحقق لدورة Vue Academy.

هل يمكنني تعلم HTML على هاتفي؟

نعم. CoddyKit متاح على الويب وكتطبيقات iOS و Android أصلية، لذا يمكنك تعلم HTML على أي جهاز وسيتم مزامنة تقدمك عبرها جميعًا.

ابدأ Vue Academy الآن

انضم إلى آلاف المتعلمين الذين يتقنون البرمجة مع دروس مدعومة بالذكاء الاصطناعي.

ابدأ مجاناً →استعرض جميع الدورات