将 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 组件 和 Lit 提供了 很好的支持。只需导入你的元素定义并在你的模板中使用元素标签名称。

此时，你应该能够构建并运行你的项目，并看到“Hello from MyElement！”消息。

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

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

编辑此页面