入门指南

使用 Lit 有很多入门方式，从我们的演练场和交互式教程到安装到现有项目中。

Lit 演练场

Permalink to "Lit 演练场"

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

交互式教程

Permalink to "交互式教程"

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

Lit 入门工具包

Permalink to "Lit 入门工具包"

我们提供 TypeScript 和 JavaScript 组件入门工具包，用于创建独立的可重用组件。请参阅入门工具包。

从 npm 本地安装

Permalink to "从 npm 本地安装"

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';

使用包

Permalink to "使用包"

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

将 Lit 添加到现有项目

Permalink to "将 Lit 添加到现有项目"

有关将 Lit 添加到现有项目或应用程序的说明，请参阅将 Lit 添加到现有项目。

Open WC 项目生成器

Permalink to "Open WC 项目生成器"

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