vue element ui scaffold webpack4
1.0.0
تمت ترقيته إلى webpack5 إذا كنت بحاجة إلى استخدام webpack4، فيمكنك تبديل الفروع: git checkout webpack4 .
** إصدار vue3 + element-ui + webpack5: فرع قابل للتحويل: git checkout vue3 **
هذا المشروع عبارة عن مشروع سقالات متعدد الصفحات ومتعدد البيئات يستخدم element-plus ضمن Vue وهو مبني على webpack5.
معاينة تأثير المشروع 1 معاينة تأثير المشروع 2
git clone https://github.com/hzsrc/vue-element-ui-scaffold-webpack4.git
# git checkout vue3
cd vue-element-ui-scaffold-webpack4
npm install
سرعة بناء أسرع وحجم ملف حزمة أصغر.
هناك طريقتان لإخراج ملفات صفحات html تلقائيًا (يتم تنفيذها بواسطة html-webpack-plugin):
أثناء التطوير، يمكنك تعديل ملفات svg أو إضافتها أو حذفها في دليل src/iconfont/svgs لإنشاء أيقونات الخطوط تلقائيًا (تدعم ttf، وwoff2، وwoff، وeot، وsvg) ودعم أنماط css ومعاينات html في نفس الوقت، وإعادة التحميل السريع فوري يمكنك رؤية التأثير. يمكنك أيضًا استخدام npm run build-font لإنشاء هذه الملفات يدويًا. ليست هناك حاجة للانتقال يدويًا إلى icomoon.io أو iconfont.cn لإنشاء وتعديل أيقونات الخطوط وcss ومعاينات الأيقونات. تم تنفيذه بناءً على webpack-iconfont-plugin-nodejs.
يمكن للمشروع استخدام المحاكاة الديناميكية لمحاكاة البيانات للواجهة الخلفية. توجد بيانات المحاكاة في المجلد الوهمي ويتم تنفيذها باستخدام ملفات js، وهي سهلة الفهم ومريحة ومرنة.
طريقة التمكين: 1. سيبدأ npm run dev الخدمة الوهمية في نفس الوقت افتراضيًا. 2. التشغيل بمفرده: تشغيل npm وهمي.
ملف التكوين: 1. عنوان خدمة الواجهة في config/serverMap.js هو: القاعدة: '"//localhost:8085"' 2. يقوم الملف mock/mock-config.js بتكوين معلمات مختلفة للنسخة الوهمية.
يشير مصدر تحميل CSS عند الطلب مباشرةً إلى ملف scss الخاص بـ element-plus، وليس إلى ملف css المترجم مسبقًا. قم بإلحاق ملف src/assets/css/element-theme/theme-changed.scss بملف متغير السمة element-plus theme-chalk/src/common/var.scss في وقت الترجمة من خلال البرنامج المساعد join-file-content-plugin من الممكن عرض التأثير فورًا بعد تعديل متغير scss دون التجميع المسبق لملف element-plus scss في ملف css. وفي الوقت نفسه، يمكن الرجوع إلى متغيرات scss الخاصة بـ element-plus في أي مكان في المشروع.
استخدم المكون الإضافي webpack-theme-color-replacer لاستخراج قواعد النمط التي تحتوي على ألوان السمات في CSS عند إنشاء حزمة الويب، وإنشاء ملف css/theme-colors.css. وبعد ذلك، عند تشغيل صفحة الويب، قم بتنزيل ملف CSS هذا واستبدل الألوان الموجودة فيه بلون السمة المخصص ديناميكيًا. نظرًا لأنه يتم استخراج ملف CSS المرتبط بالألوان فقط، فإن السرعة تكون أسرع بكثير من تنزيل ملف CSS بأكمله الخاص بـ element-plus. ولا يمكن استبدال أنماط العناصر الإضافية فحسب، بل يمكن أيضًا استبدال ألوان السمات الخاصة بالأنماط المكتوبة ذاتيًا في المشروع.
عند نشر التعليمات البرمجية، يتم إنشاء ملفات تعيين التعليمات البرمجية المصدر إلى مجلد تعيين التعليمات البرمجية المصدر الموحد ويتم تعيينها تلقائيًا في بيئة الاختبار. من أجل أمان التعليمات البرمجية، لا تقوم بيئة الإنتاج بإجراء التعيين التلقائي. إذا كان تصحيح الأخطاء مطلوبًا، فإن Chrome يدعم التعيين اليدوي للتعليمات البرمجية المصدر من خلال عنوان URL. وفقًا لمتطلبات الأمان، فإن اسم مجلد تعيين التعليمات البرمجية المصدر هذا هو اسم مجلد يعرفه المطورون فقط. أو استخدم خوارزمية التشفير الديناميكي لإنشاء اسم المجلد هذا. أو ضع ملفات تعيين التعليمات البرمجية المصدر هذه في دليل موقع الويب الذي يتطلب التحقق من تسجيل الدخول. يرجى تعديل اسم الدليل في وظيفة getSourceMapPath لملف config/index.js حسب الحاجة. بهذه الطريقة، عند حدوث خطأ ويكون التصحيح عبر الإنترنت مطلوبًا، يمكن إضافة تعيين التعليمات البرمجية المصدر بسرعة ويدويًا لتسهيل تصحيح الأخطاء، ويتم تجنب تسرب التعليمات البرمجية المصدر.
استخدم الحل البسيط vw+rem لتنفيذ التخطيط سريع الاستجابة. استخدم المكون الإضافي postcss-pxtorem لتحويل الوحدة تلقائيًا في CSS من px إلى rem. أثناء التطوير، لا يزال px يُستخدم كوحدة طول CSS. 1rem = 100px، سهل التحويل أثناء التصحيح. شائع في أجهزة الكمبيوتر الشخصية والمحطات الطرفية المتنقلة (من الأفضل استبدال element-plus بأطر عمل واجهة مستخدم أخرى للمحطات الطرفية المتنقلة).
متوافق مع IE10 وما فوق، وChrome، وFirefox، وSafari، وQQ، و360، و2345 والمتصفحات الأخرى. إذا كنت بحاجة إلى التغيير إلى إصدار الهاتف المحمول، فيرجى تعديل .browsersrc إلى إصدار الهاتف المحمول.
npm run dev
التنمية المحلية والتصحيح. استخدم عنوان خدمة الواجهة الخلفية الذي تم تكوينه بواسطة dev في config/serverMap.js.
npm run build-test
تستخدم لنشر بيئة الاختبار. يحتوي Js على تعيين رمز المصدر، ولا يحتوي CSS على تعيين رمز المصدر. استخدم عنوان خدمة الواجهة الذي تم تكوينه عن طريق الاختبار في config/serverMap.js.
npm run build
لنشر بيئة الإنتاج. استخدم عنوان خدمة الواجهة الذي تم تكوينه بواسطة prod في config/serverMap.js.
npm run build-demo
التكوين هو نفس بيئة الإنتاج، ويختلف عنوان خدمة الواجهة فقط. استخدم عنوان خدمة الواجهة الذي تم تكوينه بواسطة العرض التوضيحي في config/serverMap.js.
npm run build-dev
يُستخدم للنشر والنشر على خادم بيئة التطوير، وهو مناسب للمواقف التي تتطلب النشر على الخادم لتصحيح الأخطاء. استخدم عنوان خدمة الواجهة الذي تم تكوينه بواسطة dev في config/serverMap.js.
npm run build-preview
سيتم تمكين البيانات الوهمية الثابتة، ولن تكون هناك حاجة إلى خدمة خلفية، وسيتم استخدام البيانات الوهمية لمحاكاة مكالمات أجاكس (شريطة أن تكون واجهة API المقابلة قد كتبت بيانات وهمية). يعادل npm run build --preview && npm run play-dist .
npm run play-dist
باستخدام دليل dist كدليل جذر، ابدأ خدمة http ثابتة محلية لعرض نتائج تشغيل دليل dist بعد النشر.
npm run mock
عندما لا تكتمل خدمة الواجهة الخلفية، يمكن استخدامها لمحاكاة بيانات الواجهة الخلفية لتصحيح أخطاء وظيفة الواجهة الأمامية.
npm run proxy80
من خلال تعيين المنفذ الحالي (المنفذ 80xx) إلى المنفذ 80 أو المنفذ 443، يمكن إخفاء المنفذ أثناء الوصول ويمكن أيضًا تحقيق الوصول إلى https. بالاشتراك مع مضيفي النظام وتكوين 127.0.0.1 كاسم المجال المحدد، يمكنك استخدام اسم المجال مباشرة للوصول إلى صفحة تصحيح الأخطاء المحلية، والتي تُستخدم لتصحيح بعض السيناريوهات حيث يجب استخدام الوصول إلى اسم المجال (مثل تصحيح أخطاء WeChat، للحصول على التفاصيل، راجع: https://www.cnblogs.com/hz -blog/p/wechat-local-debug-domain.html).
