Узнайте, как начать работу со стильным приложением Svelte.

Веб-фреймворки приходят и уходят, но одним из самых многообещающих является Svelte. Svelte — отличная альтернатива React, и, хотя у него уже есть большое сообщество, это определенно тот фреймворк, на который стоит обратить внимание. Svelte позволяет легко стилизовать ваши приложения с помощью нескольких доступных подходов.

Стилизация приложений 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 файл и в сценарий тег и создайте массив, который будет содержать разные ссылки, например: