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

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

Lit Playground¶

Начните сразу же с интерактивной игровой площадки и примеров. Начните с "Hello World", затем измените его или перейдите к другим примерам.

Интерактивный учебник¶

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

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

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

Установите локально из npm¶

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

1	`npm i lit`

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

TSJS

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
экспортирует все, что есть в core, а также большинство других модулей в lit.

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

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

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

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