mpa frontend template

قالب الواجهة الأمامية MPA

قالب بسيط يعتمد على webpack وpug وstylus وes6 وpostcss للتطبيقات متعددة الصفحات

تعليق

للأسئلة والأخطاء والتحسينات استخدم المشكلات.

يحضر

مطلوب

1. تثبيت Node.js أو تحديثه؛
2. تثبيت Yarn - استخدام مدير الحزم السريع (مثل npm).

خياري

1. تثبيت البرنامج المساعد Editorconfig للمحرر الخاص بك (PhpStorm، Sublime Text، Atom، VS Code) - نمط ترميز متسق بين المحررين وIDEs المختلفين؛
2. قم بتثبيت البرنامج المساعد eslint للمحرر الخاص بك (PhpStorm، Sublime Text، Atom، VS Code) - أداة الفحص القابلة للتوصيل لـ JavaScript.

يبدأ

1. استنساخ أو تنزيل المشروع:

    git clone [email protected]:evgen3/mpa-frontend-template.git your-project-name
   

2. أدخل في مجلد المشروع وقم بإزالة مجلد .git:

    cd your-project-name && rm -rf .git
   

3. تثبيت التبعيات مع الغزل:

    yarn
   

4. استخدام أوامر البناء:
   • yarn build - بناء مشروع للإنتاج (يتضمن UglifyJSPlugin، cssnano)؛
   • yarn watch - البناء والبدء في المشاهدة من أجل التطوير (بما في ذلك خرائط المصدر)؛
   • yarn start - البناء والمراقبة والخادم المحلي للتطوير (بما في ذلك إعادة التحميل على ملفات التغيير)؛
   • yarn lint - رمز lint js في مجلد src مع قواعد airbnb.

كتاب الطبخ

تضمين الصورة في القالب

في ملف pug/includes/require.pug، الوظيفة الموجودة، الاستخدام:

img ( src = 'upload/sample.jpg' srcset = ` upload/[email protected] 2x ` alt = '' )
.block ( style = 'background-image: url(upload/sample.jpg);' )

للتضمين القصير في الملف pug/mixins/img.pug الموجود في mixin، الاستخدام:

 + img( 'sample.jpg' ) ( alt = 'image' ) .some-class

انتباه! يتطلب هذا المزيج صورة بحجم مزدوج (لـ srcset) والرابط موجود بالفعل في دليل upload/ .

تضمين المكونات الإضافية/المكتبات

CSS

تثبيت التبعية (على سبيل المثال، swiper):

 yarn add swiper

استيراد التبعية في main.styl مرة واحدة:

 @require '~swiper/dist/css/swiper.css'

يشير الرمز ~ في النمط إلى مجلد العقدة.

شبيبة

الإضافات مسج

تثبيت التبعية (على سبيل المثال، المجموعة اللاصقة):

 yarn add sticky-kit

استيراد التبعية في main.js مرة واحدة:

 import 'sticky-kit/dist/sticky-kit' ; 

مكتبات أخرى

تثبيت التبعية (على سبيل المثال، swiper):

 yarn add swiper

قم بالاستيراد في الملف الذي تحتاج إلى التبعية فيه:

 import Swiper from 'swiper/dist/js/swiper' ;

الاسم المستعار @ في القلم وشبيبة

يشير @ في المسار إلى مجلد src، ويمكنك من خلاله إنشاء مسار مطلق. CSS:

 src: url("~@/font/rouble-webfont.woff") format("woff")

شبيبة:

 import module from '@/js/module';

باستخدام svg-sprite

ضع الأيقونة في مجلد /ico

وأضف الكود في القالب الخاص بك:

 < svg class =" your-class " width =" 193 " height =" 40 " >
  < use xlink:href =" #your-icon-file-name " > </ use >
</ svg >

أو يمكنك استخدام الصلصال mixin:

 + icon( 'your-icon-file-name' ) ( width = 193 height = 40 ) .your-class