Цель:В этом учебном пособии мы узнаем о sveltekit и о том, как настроить среду приложения.
- Что такое Svelte JS и SvelteKit
- Создать образец демонстрационного приложения
- Расширение IDE для приложений svelte js
- Структура проекта
Моя установка
Версия узла — v18.12.1
Версия НПМ — 9.2.0
Среда разработки кода VS
Обзор
- 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, структура созданного проекта выглядит следующим образом:
СПАСИБО . В следующей статье будет объяснен каждый отдельный компонент в структуре проекта приложения.