Zjistěte, jak začít se stylovou aplikací Svelte.

Webové rámce přicházejí a odcházejí, ale jedním z nejslibnějších je Svelte. Svelte je skvělá alternativa k Reactu, a přestože už má velkou komunitu, rozhodně je to rámec, na který je třeba dávat pozor. Svelte usnadňuje stylování aplikací pomocí několika dostupných přístupů.

Styling štíhlých aplikací

Každá knihovna nebo framework uživatelského rozhraní vyžaduje metodu stylování jejích komponent. Většina frameworků založených na komponentách podporuje tradiční metodu stylování komponent: jednoduše importujte soubor CSS a máte hotovo. Svelte není výjimkou. Ve Svelte existují tři hlavní způsoby stylizace aplikací, z nichž každý má své výhody a nevýhody.

Nastavení vašeho projektu Svelte

Chcete-li nainstalovat Svelte, můžete použít Nástroj pro vytváření front-endu ViteJS. Chcete-li věci nastavit, ujistěte se, že Runtime Node.js a Správce balíčků uzlů (NPM) jsou správně nainstalovány na vašem počítači. Dostupnost Node.js a NPM můžete ověřit spuštěním tohoto terminálu následujícím příkazem:

instagram viewer 
node -v

Poté, co se ujistíte, že Node běží, otevřete terminál a spusťte následující:

npm create vite

Nebo:

yarn create vite

To by mělo vytvořit nový projekt Vite. Nastavte název projektu na cokoliv chcete, framework by měl být „Svelte“ a varianta by měla být JavaScript (ale můžete použít TypeScript, pokud vám to vyhovuje). Nyní se přepněte do adresáře projektu pomocí CD a spusťte následující příkaz k instalaci potřebných závislostí:

npm install

Nebo:

yarn

Po instalaci závislostí můžete spustit vývojový server spuštěním:

npm run dev

Nebo:

yarn dev

Definování označení projektu

Otevřete projekt v libovolném editoru kódu a odstraňte soubor aktiva a lib složku. Také se ujistěte, že jste vymazali obsah app.css soubor a App.svelte soubor. Otevři main.js soubor a nahraďte obsah následujícím:

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

Dále otevřete App.svelte souboru a v skript tag a vytvořte pole, které bude obsahovat různé odkazy, jako je toto: