快速开始

开始使用 Lit 有很多方式，从 Playground 和交互式教程到安装到现有项目中。

Lit Playground

通过交互式 Playground 和示例立即开始。从 "Hello World" 开始，然后自定义它或查看更多示例。

参加我们的分步教程，学习如何在几分钟内构建一个 Lit 组件。

我们提供 TypeScript 和 JavaScript 组件入门套件，用于创建独立的可复用组件。参见入门套件。

Lit 可通过 npm 以 lit 包的形式获取。

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 中的大多数其他模块。
注意，lit/static-html.js 中的 html 和 svg 导出分别被别名为 staticHtml 和 staticSvg，以避免冲突。

参见将 Lit 添加到现有项目，了解将 Lit 添加到现有项目或应用程序的说明。

Open WC 项目有一个项目生成器，可以搭建使用 Lit 的应用程序项目骨架。