HyrKGsWebsite

مقدمةقدم

مشروعي التعليمي الشخصي القائم على الصفر، التعلم القائم على المهام! يتم تحديثه من وقت لآخر، عادةً ما يكون لدي عمل وأدرس للقيام به.

☞معاينة: http://hyrkg.cn

مرحبا بكم في الزاوية اليمنى العليا ↗️ قم بتمييز مشروعي بنجمة، دعونا نتعلم ونحرز تقدمًا معًا!

قائمة مهام خطتي:

• الخلفية الربيعية
• تسجيل الدخول إلى النظام (من المتوقع استخدام oauth2)
  • التخزين المحلي وتخزين الجلسة
• تضمين VitePress في موقع الويب الخاص بي (يبدو الأمر صعبًا)
• خطط كبيرة! ?المائدة المستديرة
  • الواجهة الأمامية
  • رابط طويل، ربما WebSocket؟
• vuex، أشعر أنني مازلت بحاجة لتعلمها أولاً.

؟ مكتمل! القائمة المحددة:

• (css) جعل الواجهة متوافقة تماماً مع الوضع الليلي
• (vue-TransitionGroup) دع ملعبي يحتوي على رسوم متحركة رائعة
• (vue, js) يسمح بإضافة المكونات أو حذفها بشكل لا نهائي. قائمة تحميل المكونات بدلا من الكتابة مباشرة في HTML!
• (vue, css) مكون الحاوية المرنة الخاص بي!
• ما أجمل أن تكون لديك صفحة مخصصة للتعلم واللعب. ?يولد الملعب!
• (vue-router) لا تتطلب الصفحة الرئيسية الشخصية شريط تنقل وتريد تأثير صفحة واحدة. استخدم الأطفال في المسارات لتنفيذ وظائف الصفحة الواحدة والصفحة العامة
• (vue-router) قم بتنفيذ وظيفة التنقل واجعل شريط التنقل مفيدًا إلى حد ما!
• (vue, js) حاول إضافة عناصر (قائمة مستجيبة، خصائص محسوبة، تنفيذ مكون الاستماع) عن طريق النقر على زر. انتقل الآن إلى "الملعب".
• (vue) اجعل بطاقتي مكون VUE!
• (CSS) قم بتحسين تأثير الرسوم المتحركة للبطاقة، وسوف تحوم عند وضع الماوس عليها!
• (css) قم بتغيير شريط التنقل الخاص بـ element-plus إلى شريط التنقل الخاص بك!
• (CSS) اصنع بنفسي ثني (في الأيام الأولى، كان في الواقع شبكيًا، لكنني اكتشفته لاحقًا) النمط
• (vue) شعار متوافق مع الوضع الليلي
• (nginx) تم تحميله على الخادم الخاص بي!
• استخدم vite+vue+element-ui(element-plus-vite-starter) لإنشاء مشروع vue الخاص بك

️ المعارف المغطاة:

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

فيو

لقد تعلمت واجهة برمجة التطبيقات المدمجة مباشرة، كما يقول المثل، تعلم الجديد وليس القديم! تستخدم مكتبة المكونات عنصر Alibaba's element-plus.

• [أساسيات الاستجابة] رد الفعل (لا أستخدم هذا كثيرًا، فأنا أراجع كل شيء مباشرةً)، ref (يصبح الكائن الذي يتم مراجعته مستجيبًا)، v-bind (شائع الاستخدام)، {{}}
• [أساسيات القواعد] v-if (شائع الاستخدام)، v-for (شائع الاستخدام)، v-on (شائع الاستخدام)، v-model
• 【السمة المحسوبة】المحسوبة
• دعائم [التكوين] (شائعة الاستخدام)، والفتحات (الاسم، والمعبد. شائعة الاستخدام)، وإرجاع الحدث [$emit]، والسمات الشفافة
• [إدارة التوجيه] التكوين الأساسي لجهاز توجيه vue (المسار، إعادة التوجيه، الاسم المستعار، الأطفال، المكون)
• 【الرسوم المتحركة】الانتقال، مجموعة الانتقال
• [الوضع الليلي] المبدأ هو إضافة فئة (مظلمة) إلى html
• [الرصد المستجيب] مشاهدة

جافا سكريبت / تايب سكريبت

• [المتغيرات] var، Let، const (شائعة الاستخدام)
• [أساسيات الكائنات] المصفوفة []، الكائن {} (أستخدمه كخريطة)، كل شيء عبارة عن كائن (في هذه المرحلة ستفهم لماذا يتطلب المرجع قيمة قبل استخدامه)
• [الطريقة، تمرير المعلمة، إعادة الاستخدام] الاستيراد، الوظيفة (يمكنك فهم مبدأ الحساب من خلال الجمع بين أن كل شيء هو كائن)

CSS/SCSS:

• 【أساسيات النمط】
• 》》نمط الخط: اللون، حجم الخط، عائلة الخط (الخط، أقوم بنسخ خطوط الآخرين مباشرة)
• 》》نمط الحاوية: لون الخلفية، نصف قطر الحدود (زوايا مستديرة)، ظل الصندوق (ظل الحدود)، الحدود (رسم الحدود، عادةً ما أقوم بتشغيله عند تصميم التخطيط)
• [أساسيات التخطيط] الحشو (تعديل المسافة داخل الحاوية)، الهامش (تعديل المسافة خارج الحاوية)، العرض/الارتفاع (يمكن ملء 100% تلقائيًا، وإلا سيكون قبيحًا)، الحد الأقصى للعرض/الارتفاع
• [التخطيط سريع الاستجابة (المرن) يمكن أن يجعل الصفحة متوافقة مع الهواتف المحمولة] العرض: مرن، اتجاه مرن، التفاف مرن، ضبط المحتوى، نمو مرن (شائع الاستخدام)
• [أساسيات الرسوم المتحركة] الانتقال، التحويل، الطبقة الزائفة (مثل: التحويم)
• [أولوية النمط]!استيراد (عادتي السيئة: عندما تكون في شك، فقط !استيراد)

HTML

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

• فقط كن قادرًا على استخدام div للتقسيم، ويمكن لـ div مع العلامات وبناء الجملة حل معظم الأشياء بشكل أساسي.
• نصائح! علامة معبد Vue لا تؤثر على النمط!