Это второй пост о фреймворке 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.