将 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>Hello from MyElement!</div>
    `;
  }
}

import {LitElement, html} from 'lit';

class MyElement extends LitElement {
  render() {
    return html`
      <div>Hello from MyElement!</div>
    `;
  }
}
customElements.define('my-element', MyElement);

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

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

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

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

export const App = () => (
  <h1>My App</h1>
  <my-element></my-element>
)

大多数 JavaScript 框架都对 web components 和 Lit 有很好的支持。只需导入你的元素定义，并在模板中使用元素标签名即可。

到这一步，你应该能够构建并运行你的项目，看到 "Hello from MyElement!" 消息。

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

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