symbolMe

code_me

إعداد المشروع

 npm install

يجمع ويعيد التحميل السريع للتطوير

 npm run serve

يجمع ويصغر للإنتاج

 npm run build

الوبر وإصلاح الملفات

 npm run lint

ميزة

1. الواجهة جميلة نسبيًا، ويمكنك تخصيص معلومات سيرتك الذاتية، بما في ذلك المعلومات الشخصية، والخبرة المدرسية، وتجربة المشروع، ومعلومات المهارات الشخصية.
2. يتم تخزين معلومات المشروع في قاعدة بيانات mongodb، ويتم تخزين الملفات الكبيرة باستخدام gltf، ويتم إنشاء برنامج خدمة الخلفية بواسطة Express. عنوان المشروع: https://github.com/Longbao521/symbolMeServer
3. يحتوي المشروع على رسوم متحركة متعددة، بما في ذلك مكتبة animate.css ورسوم متحركة مخصصة للرجوع إليها.
4. يدعم المشروع لغة تخفيض السعر، ويدعم وظيفة معاينة التحرير للمدونة، ويدعم وظيفة التحميل. يتم حفظ المدونة التي تم تحميلها في قاعدة البيانات وتحديثها في الوقت الفعلي على الصفحة الرئيسية لمدونتك، مما يسمح للجميع بتسجيل ما تعلموه.
5. يدعم السيزيوم، يمكنك تعديل كود الاختبار عبر الإنترنت وتشغيله
6. يستخدم المشروع بعض الأدوات الشائعة الاستخدام في مشاريع vue، مثل سقالات vue-cli لبناء المشاريع، و element-ui لبناء أنماط المكونات الأساسية، وما إلى ذلك.
7. سيتم صيانة المشروع وتحسينه، وسيتم إطلاق إصدار برنامج صغير (mpVue، عنوان المشروع: https://github.com/Longbao521/mpvue) وإصدار سطح المكتب (Electron)، إذا أمكن، سأواصل الدراسة الرفرفة وتطوير التطبيقات عبر الأنظمة الأساسية
8. يلتزم رمز المشروع بشكل صارم بمواصفات ESLint
9. يعتمد معظم تخطيط المشروع على التخطيط المرن

كومة التكنولوجيا

Vue، Vue-CLI، Axios، LESS، Element-UI، Animate، ESLint

المشاكل التي واجهتها

• مشكلة في محدد نمط العلامة في v-html إذا كانت العلامة المكتوبة في القالب يمكنها تحديد النمط في النمط المحدد، لكن العلامة الموجودة في v-html لا يمكنها تحديد النمط المقابل في هذه المنطقة، فهناك العديد من الحلول:
  • قم بإزالة نطاق النمط وحدد نمط التسمية في ورقة الأنماط العامة. لا ينصح بهذا لأنه سيؤثر على أنماط العناصر في المكونات المختلفة.
  • استخدم /deep/(LESS, SCSS) أو >>>(CSS) محدد عميق
  • في دورة الحياة المحدثة، يقوم Js بتكوين الأنماط ديناميكيًا
• كيفية ربط وظائف مختلفة بكل زر في حلقة v-for لماذا لا يمكننا إضافة وظيفة إلى البيانات؟
  • أضف وظيفة توجيه للفئة في الأساليب. يحتوي كل عنصر في v-for على حقل طريقة، مما يحدد الوظيفة التي سيتم تشغيلها. في هذا الوقت، يمكنك تحديد @click كوظيفة توجيه، وتمريرها في حقل الطريقة المستخدمة بواسطة وظيفة التوجيه قم بتشغيل الوظيفة المقابلة لتحقيق الارتباط بين طبقة العرض وطبقة النموذج
• قم بتعيين أنماط للمكونات الفرعية في vue هذا مشابه جدًا للسؤال الأول، وأعتقد أن الطريقة التي يتعامل بها vue مع المحتوى في v-html هي إنشاء مكون فرعي له بشكل ديناميكي المكون الفرعي هذا عندما نستخدم Element -UI غالبًا ما نواجهه عند استخدام مكتبات الطرف الثالث .
  • قم بإزالة نطاق النمط وحدد نمط التسمية في ورقة الأنماط العامة. لا ينصح بهذا لأنه سيؤثر على أنماط العناصر في المكونات المختلفة.
  • استخدم /deep/(LESS, SCSS) أو >>>(CSS) محدد عميق

عرض تأثير المشروع:

الخطوات التالية

1. تحسين الوظائف المخصصة
2. أضف الوحدات الوظيفية المقابلة
3. تحسين التحقق من الرمز المميز
4. تم إطلاق إصدار البرنامج المصغر (mpvue)، وإصدار سطح المكتب (ELectron)، والنظام الأساسي المشترك (Flutter)

تغيير السجل

• 1.0.1 استخدم تعليمات مخصصة لتحقيق مقاومة اهتزاز زر الإرسال
• 1.0.2 تنفيذ وظيفة تحرير الملصقات وتحديثها
• 1.1.0 تعديل حزمة الويب وإدخال السيزيوم وتطوير وحدة منصة اختبار السيزيوم
• 1.1.1 دعم التحرير عبر الإنترنت وتنفيذ التعليمات البرمجية،