Сазнајте како да почнете да користите елегантну Свелте апликацију.

Веб оквири долазе и одлазе, али један од најперспективнијих је Свелте. Свелте је одлична алтернатива Реацт-у и, иако већ има велику заједницу, дефинитивно је оквир на који треба пазити. Свелте олакшава стилизовање ваших апликација, уз неколико доступних приступа.

Стилинг Свелте апликације

Свака библиотека или оквир корисничког интерфејса захтевају метод за стилизовање својих компоненти. Већина оквира заснованих на компонентама подржава традиционалну методу стилизовања компоненти: једноставно увезите ЦСС датотеку и готови сте. Свелте није изузетак. У Свелте-у постоје три главна начина за стилизовање ваших апликација, сваки са својим предностима и недостацима.

Подешавање вашег Свелте пројекта

Да бисте инсталирали Свелте, можете користити ВитеЈС фронт-енд алат за прављење. Да бисте поставили ствари, уверите се да је Ноде.јс рунтиме и менаџер пакета чворова (НПМ) су исправно инсталирани на вашем рачунару. Можете да проверите доступност Ноде.јс и НПМ-а тако што ћете покренути следећу наредбу овог терминала:

instagram viewer 
node -v

Након што се уверите да је Ноде покренут, отворите терминал и покрените следеће:

npm create vite

Или:

yarn create vite

Ово би требало да буде скела за нови пројекат Вите. Подесите име пројекта на шта год желите, оквир треба да буде "Свелте", а варијанта треба да буде ЈаваСцрипт (али можете користити ТипеСцрипт ако вам то одговара). Сада се пребаците на директоријум пројекта помоћу цд команду и покрените следећу команду да бисте инсталирали неопходне зависности:

npm install

Или:

yarn

Након инсталирања зависности, можете покренути развојни сервер тако што ћете покренути:

npm run dev

Или:

yarn dev

Дефинисање ознаке пројекта

Отворите пројекат у било ком уређивачу кода по избору и избришите средства и либ фолдер. Такође, побрините се да обришете садржај апп.цсс фајл и Апп.свелте фајл. Отвори маин.јс датотеку и замените садржај следећим:

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

Затим отворите Апп.свелте фајл и у скрипта означите и направите низ који ће садржати различите везе, попут овога: