كيفية تصميم تطبيقات Svelte

أطر عمل الويب تأتي وتذهب ، ولكن أحد أكثرها واعدة هو Svelte. Svelte هو بديل رائع لـ React ، وعلى الرغم من أنه يحتوي بالفعل على مجتمع كبير ، إلا أنه بالتأكيد إطار عمل يجب الانتباه إليه. يجعل Svelte من السهل تصميم تطبيقاتك ، مع توفر العديد من الأساليب.

تطبيقات التصميم الرقيق

تتطلب كل مكتبة أو إطار عمل لواجهة المستخدم طريقة لتصميم مكوناتها. تدعم معظم الأطر القائمة على المكونات الطريقة التقليدية لتصميم المكونات: ما عليك سوى استيراد ملف CSS وتكون قد انتهيت. Svelte ليست استثناء. في Svelte ، هناك ثلاث طرق رئيسية لتصميم تطبيقاتك ، ولكل منها مزاياها وعيوبها.

إعداد مشروع Svelte الخاص بك

لتثبيت Svelte ، يمكنك استخدام ملف أداة بناء الواجهة الأمامية ViteJS. لإعداد الأشياء ، تأكد من أن ملف وقت تشغيل Node.js و مدير حزمة العقدة (NPM) مثبتة بشكل صحيح على جهاز الكمبيوتر الخاص بك. يمكنك التحقق من توفر Node.js و NPM عن طريق تشغيل هذا الأمر الطرفي التالي:

node -v

بعد التأكد من تشغيل Node ، افتح الجهاز وقم بتشغيل ما يلي:

npm create vite

أو:

yarn create vite

هذا يجب أن يدعم مشروع Vite الجديد. عيّن اسم المشروع على ما تريد ، يجب أن يكون إطار العمل "Svelte" والمتغير يجب أن يكون JavaScript (ولكن يمكنك استخدام TypeScript إذا كنت راضيًا عن ذلك). الآن ، قم بالتبديل إلى دليل المشروع باستخدام ملف

قرص مضغوط أمر وتشغيل الأمر التالي لتثبيت التبعيات الضرورية:

npm install

أو:

yarn

بعد تثبيت التبعيات ، يمكنك بدء تشغيل خادم التطوير عن طريق تشغيل:

npm run dev

أو:

yarn dev

تحديد توصيف المشروع

افتح المشروع في أي محرر كود من اختيارك واحذف ملف أصول و ليب مجلد. تأكد أيضًا من مسح محتويات ملف app.css ملف و التطبيق ملف. افتح ال main.js ملف واستبدال المحتويات بما يلي:

import App from'./App.svelte'
const app = new App({
 target: document.getElementById('app'),
})
exportdefault app 

بعد ذلك ، افتح ملف التطبيق ملف وفي النصي علامة وإنشاء مصفوفة تحتوي على روابط مختلفة ، مثل هذا: