دورة Vue.js بالعربية: من الأساسيات إلى التطبيق العملي درس نصي

تهيئة المشروع والأدوات الحديثة (create-vue)

[المستوى التأسيسي (Beginner)] شرح تفصيلي من الصفر إلى الاحتراف لدرس «تهيئة المشروع والأدوات الحديثة (create-vue)» ضمن وحدة «نظام التفاعلية (Reactivity: ref/reactive/computed) والقوالب» في دورة Vue.js بالعربية: من الأساسيات إلى التطبيق العملي، مصمم بأسلوب Google Notebook مع ملخص صوتي حواري، وخريطة ذهنية بصرية، وشيفرة برمجية مشروحة، وبطاقات استذكار تفاعلية.

وقت الدراسة

10 دقيقة

الوحدة 1/7: نظام التفاعلية (Reactivity: ref/reactive/computed) والقوالب المستوى التأسيسي (Beginner) الدرس #1/35 • 10 دقيقة

تهيئة المشروع والأدوات الحديثة (create-vue)

المشروع التطبيقي المتصل: منصة إدارة عمليات تفاعلية بـ Vue 3 Composition API وPinia وVue Router 4

🎧 1. الملخص الصوتي والحوار الهندسي المعمّق (Notebook Audio Overview)

🎙️ سؤال المتدرب: لماذا نبدأ بـ «تهيئة المشروع والأدوات الحديثة (create-vue)» في هذه المرحلة من تعلم Vue 3، وكيف يرتبط بما قبله وما بعده؟

👨‍💻 المهندس أديب الصلوي: سؤال جوهري! في هندسة البرمجيات، أكبر خطأ يقع فيه المتعلم هو القفز إلى كتابة الكود دون فهم موقع «تهيئة المشروع والأدوات الحديثة (create-vue)» داخل المعمارية الكلية. داخل وحدة «نظام التفاعلية (Reactivity: ref/reactive/computed) والقوالب»، يمثّل هذا الدرس حلقة الوصل التي تنقلك إلى المستوى التأسيسي (Beginner)؛ حيث نطبّق فهم النموذج العقلي واللبنات الأساسية وتجهيز بيئة العمل خطوة بخطوة directly داخل مشروع «منصة إدارة عمليات تفاعلية بـ Vue 3 Composition API وPinia وVue Router 4».

🎙️ سؤال المتدرب: ما هي أشهر الأخطاء التي يرتكبها المبرمجون في الإنتاج عند التعامل مع «تهيئة المشروع والأدوات الحديثة (create-vue)» وكيف نتفاداها هنا؟

👨‍💻 المهندس أديب الصلوي: في بيئات الإنتاج الحقيقية، يفترض المبتدئ أن المدخلات ستأتي دائماً بالصيغة المتوقعة أو أن الشبكة لن تنقطع. لذلك في الشيفرة العملية لهذا الدرس ستلاحظ أننا بدأنا بوضع حدود تحقق صارمة (Guard Clauses / Schema Validation) وعزلنا منطق «تهيئة المشروع والأدوات الحديثة (create-vue)» بحيث يسهل اختباره آلياً دون التأثير على بقية أجزاء النظام.

🧠 2. الخريطة الذهنية والمخطط المعماري للدرس (Mind Map & Visual Flowchart)

عرض مخطط تدفق العمليات التفصيلي (Mermaid Flowchart)

flowchart TB
    subgraph S1["1. التأسيس (نظام التفاعلية (Reactivity: ref/reactive/computed) والقوالب)"]
        A["فهم المتطلب: تهيئة المشروع والأدوات الحديثة (create-vue)"] --> B["تعريف العقد والأنواع في Vue 3"]
    end
    subgraph S2["2. التنفيذ والتحقق (المستوى التأسيسي (Beginner))"]
        B --> C["كتابة الشيفرة المعزولة"]
        C --> D{"فحص المدخلات والحالات الحدية"}
        D -- "بيانات صالحة" --> E["تنفيذ المنطق الأساسي"]
        D -- "بيانات شاذة" --> F["إرجاع خطأ مهيكل وآمن"]
    end
    subgraph S3["3. الإنتاج (منصة إدارة عمليات تفاعلية بـ V...)"]
        E --> G["تسجيل الأثر (Audit/Logs) والدمج في المشروع"]
    end

📊 3. بطاقات الشرائح المتدرجة: من البداية إلى الاحتراف (Slide Deck Cards)

الشريحة 01 • التأسيس

لماذا هذا المفهوم؟

يفكّك «تهيئة المشروع والأدوات الحديثة (create-vue)» المشكلة الأساسية في Vue 3 ويمنحك نموذجاً واضحاً لتدفق البيانات.

الشريحة 02 • العقد البرمجي

المدخلات والمخرجات

تحديد الأنواع والشروط المسبقة بدقة يمنع 80% من أخطاء وقت التشغيل قبل وقوعها.

الشريحة 03 • التطبيق

الدمج في المشروع

نربط المخرج مباشرةً بمشروع «منصة إدارة عمليات تفاعلية بـ Vue 3 Composition API وPinia وVue Router 4» مع الحفاظ على نظافة الطبقات.

الشريحة 04 • الاحتراف

الأداء والإنتاج

تحصين الكود ضد الحالات الشاذة واختباره آلياً لضمان جاهزيته للنشر الفعلي.

💻 4. المختبر البرمجي المشروح بالاستشهادات (Vue 3 Code Walkthrough)

// [1] المرحلة (المستوى التأسيسي (Beginner)) — الوحدة 1: نظام التفاعلية (Reactivity: ref/reactive/computed) والقوالب
// [2] الهدف التنفيذي: تهيئة المشروع والأدوات الحديثة (create-vue) داخل مشروع (منصة إدارة عمليات تفاعلية بـ Vue 3 Composition API وPinia وVue Router 4)
<!-- تهيئة المشروع والأدوات الحديثة (create-vue) — دورة Vue.js بالعربية: من الأساسيات إلى التطبيق العملي -->
<script setup lang="ts">
import { ref, computed } from 'vue';

interface InvoiceItem {
  id: string;
  description: string;
  amount: number;
  paid: boolean;
}

const props = defineProps<{ items: InvoiceItem[] }>();
const emit = defineEmits<{ (e: 'pay', invoiceId: string): void }>();

const filterStatus = ref<'all' | 'unpaid'>('all');

const visibleItems = computed(() =>
  filterStatus.value === 'unpaid'
    ? props.items.filter((item) => !item.paid)
    : props.items
);

const totalUnpaid = computed(() =>
  props.items
    .filter((item) => !item.paid)
    .reduce((sum, item) => sum + item.amount, 0)
);
</script>

<template>
  <section dir="rtl" class="invoice-panel">
    <header class="panel-header">
      <h3>إجمالي المستحقات غير المدفوعة: { totalUnpaid.toLocaleString('ar-YE') } ر.ي</h3>
    </header>
    <ul>
      <li v-for="item in visibleItems" :key="item.id">
        <span>{ item.description }</span>
        <button v-if="!item.paid" type="button" @click="emit('pay', item.id)">
          سداد الآن
        </button>
      </li>
    </ul>
  </section>
</template>
// [3] التحقق النهائي: ضمان سلامة المخرجات وعدم تسرب الأخطاء في بيئة الإنتاج

مرجع [1] تهيئة السياق والحدود المعمارية: نحدّد نطاق الوحدة (نظام التفاعلية (Reactivity: ref/reactive/computed) والقوالب) ونفصل الاعتماديات لضمان قابلية إعادة الاستخدام.

مرجع [2] التحقق المبكر وتنفيذ المنطق الأساسي: نفحص صحة المدخلات (Fail-Fast) قبل تعديل الحالة لحماية منصة إدارة عمليات تفاعلية بـ Vue 3 Composition API وPinia وVue Router 4 من البيانات غير الصالحة.

مرجع [3] قابلية الاختبار والمراقبة في الإنتاج: نُخرج نتيجة مهيكلة يسهل التحقق منها في اختبارات الوحدة (Unit Tests) وربطها بسجلات الأداء.

📋 5. جدول المقارنة والمفاضلات الهندسية (Production Data Table)

المعيار الهندسي	الممارسة الهشة (تجنّبها)	الممارسة الاحترافية المعتمدة	الأثر في بيئة الإنتاج
العقد والتحقق	تمرير البيانات الخام دون فحص	فحص الأنواع والقيود عند حدود الدالة	منع الأعطال الصامتة وفساد البيانات
فصل المسؤوليات	خلط العرض مع قواعد العمل والتخزين	عزل كل مسؤولية في وحدة قابلة للاختبار	سهولة التطوير المستقبلي وكتابة الاختبارات
معالجة الفشل	إخفاء الخطأ أو كشف تفاصيل حساسة	إرجاع خطأ قياسي آمن مع تسجيل السبب	أمان أعلى وتشخيص أسرع في الإنتاج

🃏 6. بطاقات الاستذكار التفاعلية (Notebook Flashcards — انقر لإظهار الإجابة)

بطاقة 1: ما هو الدور المعماري لدرس «تهيئة المشروع والأدوات الحديثة (create-vue)» داخل وحدة «نظام التفاعلية (Reactivity: ref/reactive/computed) والقوالب»؟

تحقيق فهم النموذج العقلي واللبنات الأساسية وتجهيز بيئة العمل خطوة بخطوة بأسلوب منضبط يضمن سلامة البيانات وقابلية الصيانة داخل مشروع منصة إدارة عمليات تفاعلية بـ Vue 3 Composition API وPinia وVue Router 4.

بطاقة 2: لماذا نرفض الاعتماد على القيم الضمنية غير المتحقق منها في بيئة الإنتاج؟

لأن المدخلات غير المتوقعة في الإنتاج تؤدي إلى أخطاء متسلسلة أو ثغرات أمنية، والتحقق المبكر (Fail-Fast) يوقف الخطأ عند مصدره.

بطاقة 3: ما هو معيار اجتياز هذا الدرس والانتقال إلى الدرس التالي؟

تنفيذ المثال البرمجي بنفسك، واختبار حالة صحيحة وحالة خاطئة، والتأكد من فهم سبب كل سطر دون نسخ أعمى.

🛠️ 7. التمرين العملي وقائمة التحقق الميداني (Hands-On Lab)

التنفيذ المباشر: طبّق شيفرة «تهيئة المشروع والأدوات الحديثة (create-vue)» داخل بيئة عملك المحلية في مشروع منصة إدارة عمليات تفاعلية بـ Vue 3 Composition API وPinia وVue Router 4.
اختبار الحالات الحدية (Edge Cases): جرّب تمرير مدخلات فارغة أو غير متوقعة وتحقّق من استجابة الحماية في الخطوة [2].
التوثيق والالتزام: أضف تعليقاً توثيقياً يوضح العقد البرمجي واحفظ تقدمك قبل الانتقال إلى الدرس التالي.

دروس نصية