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

Начать работу с 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@3/core/lit-core.min.js';

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

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

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

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

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

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

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

Редактировать эту страницу