Цель:В этом учебном пособии мы узнаем о sveltekit и о том, как настроить среду приложения.

  1. Что такое Svelte JS и SvelteKit
  2. Создать образец демонстрационного приложения
  3. Расширение IDE для приложений svelte js
  4. Структура проекта

Моя установка

Версия узла — v18.12.1

Версия НПМ — 9.2.0

Среда разработки кода VS

Обзор

  1. Svelte JS и комплект Svelte

а. Это среда разработки интерфейса с открытым исходным кодом, созданная Ричем Харрисом.

B. Его легкая структура с высокой производительностью

в. Сокращает шаблонный код, чтобы разработчики могли сосредоточиться на фактической логике.

д. Он не использует виртуальный DOM, код компилируется в простой java-скрипт, поэтому помогает повысить производительность.

е. Svelte Kit построен на основе svelte, чтобы сделать веб-разработку проще и эффективнее. пожалуйста, обратитесь к дополнительной документации на официальном сайте https://kit.svelte.dev/

2. Создание примера приложения

Мы можем создать приложение, используя следующие простые команды (убедитесь, что вы установили node/npm в своей системе)

а. Перейдите в нужную папку, в которой будет создан проект, затем запустите, он попросит вас указать некоторые параметры, показывающие ДА/НЕТ для установки плагина/шаблона. пожалуйста, предоставьте то же самое (добавьте образец скриншота ниже)

npm create svelte@latest my-demo-app

б. Как только вы получите требуемый вывод выше, перейдите в папку проекта и выполните следующие команды (добавлен скриншот ниже)

cd my-demp-app (my-demo-app is my application name )
npm install
npm run dev

вы можете видеть в приведенном выше результате командной строки приложение запущено и работает на http://localhost:5173/ со следующей страницей для отображения.

3. Расширение Svelte VS Code IDE

мы можем использовать расширение кода svelte для нашей IDE, например, поскольку я использую код Visual Studio для своей разработки, поэтому мы можем использовать расширение Svelte для кода VS, как показано ниже.

После того, как вы импортируете проект в коде VS, структура созданного проекта выглядит следующим образом:

СПАСИБО . В следующей статье будет объяснен каждый отдельный компонент в структуре проекта приложения.