在现有项目中添加 Lit

Lit 不需要任何专门的工具，Lit 组件可以在任何 JavaScript 框架或任何服务器模板系统/ CMS 中使用，因此 Lit 非常适合添加到现有项目和应用中。

首先，从 npm 安装 lit 包：

npm i lit

如果你还没有使用 npm 来管理 JavaScript 依赖项，则需要先设置项目。我们推荐使用 npm CLI。

你可以在项目源代码的任何位置创建新元素：

lib/components/my-element.ts

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

@customElement('my-element')
class MyElement extends LitElement {
  render() {
    return html`
      <div>来自 MyElement 的问候！</div>
    `;
  }
}

import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  render() {
    return html`
      <div>来自 MyElement 的问候！</div>
    `;
  }
}
customElements.define('my-element', MyElement);

使用组件的方式取决于你的项目以及它使用的库或框架。你可以在 HTML 中、使用 DOM API 或在模板语言中使用组件：

<script type="module" src="/lib/components/my-element.js">
<my-element></my-element>

JSX 是一种非常常见的模板语言。在 JSX 中，小写的元素名称会创建 HTML 元素，Lit 组件就是 HTML 元素。使用你在 @customElement() 装饰器中指定的标签名：

import './components/my-element.js';

export const App = () => (
  <h1>我的应用</h1>
  <my-element></my-element>
)

大多数 JavaScript 框架都很好地支持 Web Components 和 Lit。只需导入元素定义并在模板中使用元素标签名即可。

此时，你应该能够构建并运行项目，看到"来自 MyElement 的问候！"的消息。

如果你准备为组件添加功能，请前往组件了解如何构建第一个 Lit 组件，或前往模板了解模板编写的详细信息。

有关构建项目的详细信息，包括一些 Rollup 配置示例，请参阅生产环境构建。