Начало работы

Начать работу с Lit можно разными способами: от нашей интерактивной среды и интерактивного руководства до установки в существующий проект.

Интерактивная среда Lit

Начните прямо сейчас с интерактивной среды и примеров. Начните с «Hello World», затем настройте его или перейдите к другим примерам.

Интерактивное руководство

Пройдите наше пошаговое руководство, чтобы узнать, как создать компонент Lit за несколько минут.

Стартовые наборы Lit

Мы предоставляем стартовые наборы компонентов на TypeScript и JavaScript для создания автономных повторно используемых компонентов. См. раздел Стартовые наборы.

Локальная установка из npm

Lit доступен в виде пакета lit через npm.

npm i lit

Затем импортируйте его в файлы JavaScript или TypeScript:

import {LitElement, html} from 'lit';
import {customElement, property} from 'lit/decorators.js';

import {LitElement, html} from 'lit';

Использование сборок

Lit также доступен в виде предварительно собранных файловых сборок. Они предоставляют больше гибкости при организации рабочего процесса разработки: например, если вы предпочитаете скачать один файл вместо использования npm и инструментов сборки. Сборки представляют собой стандартные модули JavaScript без зависимостей — любой современный браузер должен уметь импортировать и выполнять сборки из <script type="module">, например:

import {LitElement, html} from 'https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js';

Если вы используете npm для зависимостей на стороне клиента, вам следует использовать пакет lit, а не эти сборки. В сборках намеренно объединена большая часть или весь Lit в один файл, из-за чего ваша страница может загружать больше кода, чем ей необходимо.

Чтобы просмотреть сборки, перейдите по адресу https://cdn.jsdelivr.net/gh/lit/dist/ и с помощью раскрывающегося меню откройте страницу нужной версии. На этой странице для каждого типа сборки, доступной в данной версии, будет своя папка. Существует два типа сборок:

core: https://cdn.jsdelivr.net/gh/lit/dist@2/core/lit-core.min.js
core экспортирует те же элементы, что и главный модуль пакета lit.
all: https://cdn.jsdelivr.net/gh/lit/dist@2/all/lit-all.min.js
all экспортирует всё из core, а также большинство других модулей из lit.
Обратите внимание: экспорты html и svg из lit/static-html.js переименованы в staticHtml и staticSvg соответственно, чтобы избежать конфликтов.

Добавление Lit в существующий проект

Инструкции по добавлению Lit в существующий проект или приложение см. в разделе Добавление Lit в существующий проект.

Генератор проектов Open WC

В проекте Open WC есть генератор проектов, который может создать шаблон проекта приложения на Lit.

Изменить эту страницу

© Google LLC
Licensed under the Creative Commons Attribution 3.0 Unported License.
https://lit.dev/docs/v2/getting-started/