يوجد مشكلة في media@ اصبحت تنفذ في عرض الشاشات الكبيرة والصغيرة

في ملف MyMain.vue. يوجد لديك خلل وهو التالي:

أغلقت القوس الخاص بالميديا في السطر 330 بعد ما عملت ال css الخاص بال .mymain فما بعده لم يحسب أنه من ضمن الميديا.

@media (max-width: 778px) {
  .my-main {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
  }
}   انظر هنا هنالك خطأ اغلقت القوس مبكرا

هذا ما فعلته.

يجب عليك حذف هذا القوس واضافته في النهاية:

.prog {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  img {
    width: 500px;
  }
}}
</style>

كيف يمكن رفع المشروع vue

ماذا تقصد برفع المشروع هل تقصد لمستودع GitHub ام ماذا ؟ 

في ملف MyMain.vue يجب تضمين جميع التنسيقات الخاصة بالشاشات الصغيرة داخل البلوك الخاص بـ media@ لاحظ أنك قمت بإغلاق  القوس { للبلوك media@ مبكرا في سطر 322 

 @media(max-width: 778px){
        .my-main{
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
        }
    }
^^^^^^^^
    .cards{
            display: flex;
            flex-wrap: wrap;
            .card{
                width: 100%;
            }
        }

لذلك باقي التنسيقات (cards, .skills, .prog.) لا تحتسب ضمن الشاشات الصغيرة وتم تطبيقها على جميع الشاشات بدلا من الشاشات الصغيرة فقط. لذلك يجب حذف هذا القوس  { ووضعه في نهاية التنسيقات ليصبح الكود ب الخاص بـ media@  بعد التعديل كالتالي

@media(max-width: 778px){
    .my-main {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }

    .cards {
        display: flex;
        flex-wrap: wrap;
        .card {
            width: 100%;
        }
    }

    .skills {
        display: flex;
        flex-direction: column;
        text-align: center;
        .icons {
            display: flex;
            flex-wrap: wrap;
            margin-top: 10px;
            gap: 10px;
        }
        div {
            width: 100%;
        }
    }

    .prog {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        img {
            width: 500px;
        }
    }
}

اريد رفع المشروع على netlify

في الواقع لدينا مقالة برمجية لهذا الموضوع يمكنك الاطلاع عليها.

بتاريخ 10 دقائق مضت قال Hxfhf Ucicic:

اريد رفع المشروع على netlify

لرفع المشروع على netify في البداية عليك بالقيام بعملية البناء للمشروع عن طريق فتح الـ terminal ووضع الأمر 

npm run build

ثم enter ستلاحظ إنشاء مجلد جديد باسم dist هذا المجلد يحتوي على نسخة المشروع الجاهزة للنشر.

بعد ذلك نريد رفع إلى netlify 
الخطوات:

• افتح موقع https://app.netlify.com
• سجل دخول بحسابك أو أنشئ حساب جديد.
• من لوحة التحكم، اضغط على زر Add new site → ثم Deploy manually.
• اسحب مجلد dist من جهازك وافلته داخل المربع.
• انتظر لحظات وسيتم رفع المجلد  ونشر المشروع.
• بعد النشر Netlify تستطيع فتح الموقع من خلال الضغط على الزر Open production deploy 
  ستلاحظ فتح الموقع في تبويب جديد.

  ويوجد مقالة أيضا تتحدث عن رفع مشاريع vue ولكن عن طريق ربط المستودع للمشروع على github بموقع netlify تستطيع الإطلاع عليها 

لكن مجلد dist فارغ هل يوجد مشكلة في هذا

بتاريخ 44 دقائق مضت قال Hxfhf Ucicic:

لكن مجلد dist فارغ هل يوجد مشكلة في هذا

لا يُفترض أن يكون فارغ قمت بتحميل مجلد المشروع الخاص بك هنا وتنفيذ أمر البناء:

npm run build

وتم التحزيم وتجهيز المشروع للنشر كالتالي:

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