Μάθετε πώς να ξεκινήσετε με μια κομψή εφαρμογή Svelte.

Τα πλαίσια Web έρχονται και παρέρχονται, αλλά ένα από τα πιο πολλά υποσχόμενα είναι το Svelte. Το Svelte είναι μια εξαιρετική εναλλακτική λύση για το React και, παρόλο που έχει ήδη μια μεγάλη κοινότητα, είναι σίγουρα ένα πλαίσιο που πρέπει να προσέξετε. Το Svelte διευκολύνει το στυλ των εφαρμογών σας, με διάφορες διαθέσιμες προσεγγίσεις.

Εφαρμογές Styling Svelte

Κάθε βιβλιοθήκη ή πλαίσιο διεπαφής χρήστη απαιτεί μια μέθοδο για το στυλ των στοιχείων της. Τα περισσότερα πλαίσια που βασίζονται σε στοιχεία υποστηρίζουν την παραδοσιακή μέθοδο διαμόρφωσης στοιχείων: απλώς εισάγετε το αρχείο CSS και τελειώσατε. Το Svelte δεν αποτελεί εξαίρεση. Στο Svelte, υπάρχουν τρεις κύριοι τρόποι για το στυλ των εφαρμογών σας, ο καθένας με τα δικά του πλεονεκτήματα και μειονεκτήματα.

Ρύθμιση του Svelte Project σας

Για να εγκαταστήσετε το Svelte, μπορείτε να χρησιμοποιήσετε το Εργαλείο δημιουργίας front-end ViteJS. Για να ρυθμίσετε τα πράγματα, βεβαιωθείτε ότι το

instagram viewer
Χρόνος εκτέλεσης Node.js και ο Node Package Manager (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 αρχείο και στο γραφή προσθέστε ετικέτα και δημιουργήστε έναν πίνακα που θα περιέχει διαφορετικούς συνδέσμους, όπως αυτό: