將 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 範例組態，請參閱建置以用於生產。

編輯此頁面