Это второй пост о фреймворке Svelte, и он продемонстрирует структуру проекта и основные компоненты их шаблона по умолчанию.

Если вы пропустили мой пост о настройке проекта, посмотрите мой предыдущий пост

После настройки проекта вы увидите шаблон проекта по умолчанию следующим образом:

Главное на что обратить внимание:

  • Расширение .svelte — все компоненты обозначаются как расширение .svelte в среде Svelte.
  • App.svelte — это первый компонент, отображаемый в приложении.
  • main.js — файл начальной загрузки приложения, этот файл вызывает App.svelte.
  • rollup.config.js — официальный встроенный инструмент, но нам нужно придерживаться rollup.js, мы также можем интегрировать webpack.

Как выглядит App.svelte

В Svelte основной частью является компонент, в который входят:

  • ‹scripts›‹/script› — здесь находится вся логика javascript, она будет запущена один раз после создания экземпляра компонента.
  • ‹стиль›‹/стиль›
  • HTML

Надеюсь, мне не придется объяснять каждый подраздел выше :)

Если вы не видите синтаксис компонента Svelte, как на изображении выше, установите расширение из кода VS.

Продолжайте читать, я начну разработку простого входящего сообщения приложения с использованием Svelte. Весь код вы можете посмотреть на моем Github.