خطوة 22: تصميم واجهة المستخدم بواسطة Webpack
تصميم واجهة المستخدم بواسطة Webpack¶
لم نقضي وقتًا في تصميم واجهة المستخدم. لنمط مثل الموالية ، سوف نستخدم كومة حديثة على أساس Webpack. ولإضافة لمسة Symfony وتيسير تكاملها مع التطبيق ، دعنا نثبت Webpack Encore:
1 | $ symfony composer req encore
|
تم إنشاء بيئة Webpack كاملة من أجلك: تم إنشاء package.json
و`` webpack.config.js`` وتحتويان على تكوين افتراضي جيد. افتح `` webpack.config.js`` ، ويستخدم التجريد Encore لتكوين Webpack.
يحدد الملف package.json
بعض الأوامر التي سنستخدمها طوال الوقت.
يحتوي دليل assets
على نقاط الدخول الرئيسية لأصول المشروع: `` styles/app.css`` و app.js
.
استخدام Sass¶
بدلاً من استخدام CSS العادي ، دعنا ننتقل إلى Saas:
1 | $ mv assets/styles/app.css assets/styles/app.scss
|
1 2 3 4 5 6 7 8 9 10 11 | --- a/assets/app.js
+++ b/assets/app.js
@@ -6,7 +6,7 @@
*/
// any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.css';
+import './styles/app.scss';
// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
// import $ from 'jquery';
|
تثبيت محمل Saas :
1 | $ yarn add node-sass sass-loader --dev
|
تمكين محمل Sass في Webpack:
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 (قمنا أيضًا بتنظيف الملف):
1 2 3 4 5 6 7 | --- a/assets/styles/app.scss
+++ b/assets/styles/app.scss
@@ -1,3 +1 @@
-body {
- background-color: lightgray;
-}
[email protected] '~bootstrap/scss/bootstrap';
|
افعل نفس الشيء مع ملف JS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | --- a/assets/app.js
+++ b/assets/app.js
@@ -7,8 +7,7 @@
// any CSS you import will output into a single css file (app.css in this case)
import './styles/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/app.js');
+bsCustomFileInput.init();
|
يدعم نظام Bootstrap , Symfony form محليًا باستخدام سمة خاصة ، وتمكينه:
1 2 | twig:
form_themes: ['bootstrap_4_layout.html.twig']
|
تصميم الHTML¶
نحن الآن على استعداد لنمط التطبيق. قم بتنزيل وتوسيع الأرشيف في جذر المشروع:
1 2 3 | $ php -r "copy('https://symfony.com/uploads/assets/guestbook-5.0.zip', 'guestbook-5.0.zip');"
$ unzip -o guestbook-5.0.zip
$ rm guestbook-5.0.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.