כיצד לעצב אפליקציות Svelte

מסגרות אינטרנט באות והולכות, אבל אחת המבטיחות ביותר היא Svelte. Svelte היא אלטרנטיבה מצוינת ל-React, ולמרות שכבר יש לה קהילה גדולה, זו בהחלט מסגרת שצריך להיזהר ממנה. Svelte מקל על עיצוב האפליקציות שלך, עם מספר גישות זמינות.

עיצוב יישומי 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 אם אתה מרגיש בנוח עם זה). כעת, עבור לספריית הפרויקט עם ה-

CD הפקודה והפעל את הפקודה הבאה כדי להתקין את התלות הדרושות:

npm install

אוֹ:

yarn

לאחר התקנת התלות תוכל להפעיל את שרת הפיתוח על ידי הפעלת:

npm run dev

אוֹ:

yarn dev

הגדרת הסימון של הפרויקט

פתח את הפרויקט בכל עורך קוד לבחירה ומחק את ה נכסים ו lib תיקייה. כמו כן, הקפד לנקות את התוכן של app.css הקובץ וה- App.svelte קוֹבֶץ. פתח את ה main.js קובץ והחלף את התוכן בדברים הבאים:

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

לאחר מכן, פתח את App.svelte קובץ וב- תַסרִיט תייג וצור מערך שיכיל קישורים שונים, כמו זה: