Dowiedz się, jak zacząć ze stylową aplikacją Svelte.

Frameworki internetowe przychodzą i odchodzą, ale jednym z najbardziej obiecujących jest Svelte. Svelte to świetna alternatywa dla Reacta i chociaż ma już dużą społeczność, zdecydowanie jest to framework, na który należy uważać. Svelte ułatwia stylizowanie aplikacji, oferując kilka dostępnych podejść.

Stylizacja smukłych aplikacji

Każda biblioteka lub struktura interfejsu użytkownika wymaga metody stylizowania jej komponentów. Większość frameworków opartych na komponentach obsługuje tradycyjną metodę stylizowania komponentów: wystarczy zaimportować plik CSS i gotowe. Svelte nie jest wyjątkiem. W Svelte istnieją trzy główne sposoby stylizowania aplikacji, z których każdy ma swoje zalety i wady.

Konfiguracja Twojego smukłego projektu

Aby zainstalować Svelte, możesz użyć Narzędzie do tworzenia front-endu ViteJS. Aby skonfigurować rzeczy, upewnij się, że Środowisko uruchomieniowe Node.js I Menedżer pakietów węzłów (NPM) są poprawnie zainstalowane na komputerze. Możesz sprawdzić dostępność Node.js i NPM, uruchamiając ten terminal, wykonując następujące polecenie:

instagram viewer 

node -v

Po upewnieniu się, że Node działa, otwórz terminal i uruchom następujące polecenie:

npm create vite

Lub:

yarn create vite

To powinno stanowić rusztowanie dla nowego projektu Vite. Ustaw nazwę projektu na dowolną, framework powinien być „Svelte”, a wariantem powinien być JavaScript (ale możesz użyć TypeScript, jeśli czujesz się z tym komfortowo). Teraz przejdź do katalogu projektu za pomocą płyta CD polecenie i uruchom następujące polecenie, aby zainstalować niezbędne zależności:

npm install

Lub:

yarn

Po zainstalowaniu zależności możesz uruchomić serwer programistyczny, uruchamiając:

npm run dev

Lub:

yarn dev

Definiowanie znaczników projektu

Otwórz projekt w dowolnym wybranym edytorze kodu i usuń plik aktywa I lib teczka. Upewnij się również, że wyczyściłeś zawartość pliku aplikacja.css plik i Smukłe aplikacje plik. Otworzyć main.js plik i zamień zawartość na następującą:

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

Następnie otwórz Smukłe aplikacje plik i w scenariusz tag i utwórz tablicę, która będzie zawierać różne linki, na przykład: