A karcsú alkalmazások stílusozása

A webes keretrendszerek jönnek-mennek, de az egyik legígéretesebb a Svelte. A Svelte nagyszerű alternatívája a Reactnak, és bár már nagy közösséggel rendelkezik, mindenképpen érdemes figyelni rá. A Svelte megkönnyíti az alkalmazások stílusának kialakítását, számos megközelítéssel.

Svelte alkalmazások formázása

Minden UI-könyvtárnak vagy keretrendszernek szüksége van egy módszerre az összetevői stílusához. A legtöbb komponens alapú keretrendszer támogatja az összetevők stílusának hagyományos módszerét: egyszerűen importálja a CSS-fájlt, és kész. Svelte sem kivétel. A Svelte-ben három fő módja van az alkalmazások stílusának, mindegyiknek megvannak a maga előnyei és hátrányai.

A Svelte Project beállítása

A Svelte telepítéséhez használhatja a ViteJS előtér-építő eszköz. A dolgok beállításához győződjön meg arról, hogy a Node.js futási idő és a Node Package Manager (NPM) megfelelően vannak telepítve a számítógépére. A Node.js és az NPM elérhetőségét a terminál következő parancsának futtatásával ellenőrizheti:

node -v

Miután meggyőződött arról, hogy a Node fut, nyissa meg a terminált, és futtassa a következőket:

npm create vite

Vagy:

yarn create vite

Ez egy új Vite projekt állványzatába fog kerülni. Állítsa be a projekt nevét arra, amit akar, a keretrendszer legyen "Svelte", a változat pedig JavaScript legyen (de használhatja a TypeScriptet, ha kényelmes). Most váltson át a projektkönyvtárra a CD parancsot, és futtassa a következő parancsot a szükséges függőségek telepítéséhez:

npm install

Vagy:

yarn

A függőségek telepítése után elindíthatja a fejlesztői kiszolgálót a következő futtatással:

npm run dev

Vagy:

yarn dev

A projekt jelölésének meghatározása

Nyissa meg a projektet bármelyik kódszerkesztőben, és törölje a eszközök és lib mappát. Ezenkívül győződjön meg arról, hogy törölte a tartalmát app.css fájl és a App.svelte fájlt. Nyissa meg a main.js fájlt, és cserélje ki a tartalmat a következőre:

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

Ezután nyissa meg a App.svelte fájlban és a forgatókönyv címkét, és hozzon létre egy tömböt, amely különböző hivatkozásokat tartalmaz, például: