入門套件

Lit 入門套件是可重複使用的 Lit 元件的專案範本，可以發佈供他人使用。

若要在本機開始使用元件，您可以使用這些入門專案之一

• Lit JavaScript 入門專案
• Lit TypeScript 入門專案

這兩個專案都定義了一個 Lit 元件。它們還新增了一組可選工具，用於開發、檢查和測試元件

• Node.js 和 npm 用於管理依賴項。需要 Node.js 10 或更高版本。
• 本機開發伺服器，Web Dev Server。
• 使用 ESLint 和 lit-analyzer 進行檢查。
• 使用 Web Test Runner 進行測試。
• 使用 web-component-analyzer 和 eleventy 建立的靜態文件網站。

這些工具都不是使用 Lit 所必需的。它們代表了一組良好的開發人員體驗的可能工具。

在本機試用專案的最快方法是將其中一個入門專案下載為 zip 檔案。

1. 從 GitHub 下載入門專案作為 zip 檔案

   • JavaScript 入門專案
   • TypeScript 入門專案

2. 解壓縮 zip 檔案。

3. 安裝依賴項。

   cd <project folder>
   npm i

1. 如果您使用的是入門專案的 TypeScript 版本，請建置專案的 JavaScript 版本

   npm run build

   若要監看檔案並在檔案修改時重建，請在單獨的 shell 中執行下列命令

   npm run build:watch

   如果您使用的是入門專案的 JavaScript 版本，則不需要建置步驟。

2. 執行開發伺服器

   npm run serve

3. 在瀏覽器標籤中開啟專案示範頁面。例如

   http://localhost:8000/dev/

   您的伺服器可能會使用不同的埠號。請檢查終端機輸出中的 URL 以取得正確的埠號。

編輯您的元件定義。您編輯的檔案取決於您使用的語言

• JavaScript。編輯專案根目錄中的 my-element.js 檔案。
• TypeScript。編輯 src 目錄中的 my-element.ts 檔案。

程式碼中有幾件事需要注意

• 程式碼為元件定義了一個類別 (MyElement)，並將其註冊到瀏覽器中，作為名為 <my-element> 的自訂元素。

  @customElement('my-element')
  export class MyElement extends LitElement { /* ... */ }

  export class MyElement extends LitElement { /* ... */ }
  
  customElements.define('my-element', MyElement);

• 元件的 render 方法定義了一個將作為元件一部分呈現的樣板。在此情況下，它包括一些文字、一些資料繫結和一個按鈕。如需更多資訊，請參閱樣板。

  export class MyElement extends LitElement {
    // ...
    render() {
      return html`
        <h1>Hello, ${this.name}!</h1>
        <button @click=${this._onClick}>
          Click Count: ${this.count}
        </button>
        <slot></slot>
      `;
    }
  }

• 元件定義了一些屬性。元件會回應這些屬性的變更（例如，必要時重新渲染樣板）。如需更多資訊，請參閱屬性。

  export class MyElement extends LitElement {
    // ...
    @property({type: String})
    name = 'World';
    //...
  }

  export class MyElement extends LitElement {
    // ...
    static properties = {
      name: {type: String}
    };
  
    constructor() {
      super();
      this.name = 'World';
    }
    // ...
  }

您可能想要將元件名稱從「my-element」變更為更適合的名稱。使用 IDE 或其他允許您在整個專案中執行全域搜尋和取代的文字編輯器來執行此操作最簡單。

1. 如果您使用的是 TypeScript 版本，請移除產生的檔案

   npm run clean

2. 在專案的所有檔案中（node_modules 資料夾除外）搜尋並以新的元件名稱取代「my-element」。

3. 在專案的所有檔案中（node_modules 資料夾除外）搜尋並以新的類別名稱取代「MyElement」。

4. 重新命名來源和測試檔案，以符合新的元件名稱

   JavaScript

   • src/my-element.js
   • src/test/my-element_test.js

   TypeScript

   • src/my-element.ts
   • src/test/my-element_test.ts

5. 如果您使用的是 TypeScript 版本，請重建專案

   npm run build

6. 測試並確保您的元件仍可正常運作

   npm run serve

準備好為您的元件新增功能了嗎？請前往元件，以瞭解如何建立您的第一個 Lit 元件，或前往樣板，以取得撰寫樣板的詳細資訊。

如需執行測試和使用其他工具的詳細資訊，請參閱入門專案 README

• TypeScript 專案 README
• JavaScript 專案 README

如需將您的元件發佈到 npm 的指南，請參閱發佈。

編輯此頁面