Разберете как да започнете със стилно приложение Svelte.

Уеб рамките идват и си отиват, но една от най-обещаващите е Svelte. Svelte е чудесна алтернатива на React и въпреки че вече има голяма общност, определено е рамка, за която трябва да внимавате. Svelte улеснява стилизирането на вашите приложения с няколко налични подхода.

Приложения за стайлинг

Всяка UI библиотека или рамка изисква метод за стилизиране на нейните компоненти. Повечето рамки, базирани на компоненти, поддържат традиционния метод за стилизиране на компоненти: просто импортирайте CSS файла и сте готови. Svelte не прави изключение. В Svelte има три основни начина за стилизиране на вашите приложения, всеки със своите предимства и недостатъци.

Създаване на вашия проект Svelte

За да инсталирате Svelte, можете да използвате ViteJS преден инструмент за изграждане. За да настроите нещата, уверете се, че Време за изпълнение на Node.js и мениджърът на пакети на възли (NPM) са правилно инсталирани на вашия компютър. Можете да проверите наличността на Node.js и NPM, като изпълните следната команда на този терминал:

instagram viewer 
node -v

След като се уверите, че Node работи, отворете терминала и изпълнете следното:

npm create vite

Или:

yarn create vite

Това трябва да създаде нов проект на Vite. Задайте името на проекта каквото искате, рамката трябва да е „Svelte“, а вариантът трябва да е JavaScript (но можете да използвате TypeScript, ако ви е удобно). Сега превключете към директорията на проекта с cd и изпълнете следната команда, за да инсталирате необходимите зависимости:

npm install

Или:

yarn

След като инсталирате зависимостите, можете да стартирате сървъра за разработка, като изпълните:

npm run dev

Или:

yarn dev

Дефиниране на маркирането на проекта

Отворете проекта във всеки редактор на код по избор и изтрийте активи и либ папка. Също така се уверете, че сте изчистили съдържанието на app.css файл и App.svelte файл. Отвори main.js файл и заменете съдържанието със следното:

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

След това отворете App.svelte файл и в сценарий маркирайте и създайте масив, който ще съдържа различни връзки, като този: