خطوة 22: تصميم واجهة المستخدم بواسطة Webpack

5.0 version
Maintained

تصميم واجهة المستخدم بواسطة Webpack

لم نقضي وقتًا في تصميم واجهة المستخدم. لنمط مثل الموالية ، سوف نستخدم كومة حديثة على أساس Webpack. ولإضافة لمسة Symfony وتيسير تكاملها مع التطبيق ، دعنا نثبت Webpack Encore:

1
$ symfony composer req encore

تم إنشاء بيئة Webpack كاملة من أجلك: تم إنشاء package.json و`` webpack.config.js`` وتحتويان على تكوين افتراضي جيد. افتح `` webpack.config.js`` ، ويستخدم التجريد Encore لتكوين Webpack.

يحدد الملف package.json بعض الأوامر التي سنستخدمها طوال الوقت.

يحتوي دليل assets على نقاط الدخول الرئيسية لأصول المشروع: `` css/app.css`` و js/app.js.

استخدام Sass

بدلاً من استخدام CSS العادي ، دعنا ننتقل إلى Saas:

1
$ mv assets/css/app.css assets/css/app.scss
patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -6,7 +6,7 @@
  */

 // any CSS you import will output into a single css file (app.css in this case)
-import '../css/app.css';
+import '../css/app.scss';

 // Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
 // import $ from 'jquery';

تثبيت محمل Saas :

1
$ yarn add node-sass "[email protected]^7.0.1" --dev

تمكين محمل Sass في Webpack:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -54,7 +54,7 @@ Encore
     })

     // enables Sass/SCSS support
-    //.enableSassLoader()
+    .enableSassLoader()

     // uncomment if you use TypeScript
     //.enableTypeScriptLoader()

كيف عرفت الحزم التي سيتم تثبيتها؟ إذا حاولنا بناء أصولنا بدونها ، لكان Encore قد أعطانا رسالة خطأ لطيفة تقترح الأمر yarn add اللازم لتثبيت التبعيات لتحميل ملفات scss..

الاستفادة من Bootstrap

للبدء بإعدادات افتراضية جيدة وإنشاء موقع ويب سريع الاستجابة ، يمكن لإطار عمل CSS مثل </Bootstrap <https://getbootstrap.com _ أن يقطع شوطًا طويلًا. تثبيته كحزمة:

1
$ yarn add bootstrap jquery popper.js bs-custom-file-input --dev

أضف Bootstrap في ملف CSS (قمنا أيضًا بتنظيف الملف):

patch_file
1
2
3
4
5
6
7
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,3 +1 @@
-body {
-    background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';

افعل نفس الشيء مع ملف JS:

patch_file
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -7,8 +7,7 @@

 // any CSS you import will output into a single css file (app.css in this case)
 import '../css/app.scss';
+import 'bootstrap';
+import bsCustomFileInput from 'bs-custom-file-input';

-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-// import $ from 'jquery';
-
-console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
+bsCustomFileInput.init();

يدعم نظام Bootstrap , Symfony form محليًا باستخدام سمة خاصة ، وتمكينه:

config/packages/twig.yaml
1
2
twig:
    form_themes: ['bootstrap_4_layout.html.twig']

تصميم الHTML

نحن الآن على استعداد لنمط التطبيق. قم بتنزيل وتوسيع الأرشيف في جذر المشروع:

1
2
3
$ php -r "copy('https://symfony.com/uploads/assets/guestbook.zip', 'guestbook.zip');"
$ unzip -o guestbook.zip
$ rm guestbook.zip

إلقاء نظرة على القوالب ، قد تتعلم خدعة أو اثنتين حول Twig.

بناء الأصول

أحد التغييرات الرئيسية عند استخدام Webpack هو أن ملفات CSS و JS لا يمكن استخدامها مباشرة من قبل التطبيق. يجب أن يتم "تجميعها" أولاً.

في عملية التطوير ، يمكن إجراء تجميع الأصول عن طريق أمر encore dev:

1
$ symfony run yarn encore dev

بدلاً من تنفيذ الأمر في كل مرة يحدث فيها تغيير ، أرسله إلى الخلفية واتركه يشاهد تغييرات JS و CSS:

1
$ symfony run -d yarn encore dev --watch

خذ الوقت الكافي لاكتشاف التغييرات المرئية. إلقاء نظرة على التصميم الجديد في المتصفح.

يتم الآن تصميم نموذج تسجيل الدخول الذي تم إنشاؤه وكذلك تستخدم حزمة Maker فئات Bootstrap CSS افتراضيًا:

بالنسبة للإنتاج ، تكتشف SymfonyCloud تلقائيًا أنك تستخدم Encore وتجمع لك الأصول خلال مرحلة الإنشاء.


  • « Previous خطوة 21: التخزين المؤقت للأداء
  • Next » خطوة 23: تغيير حجم الصور

This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.