入门套件

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. 在浏览器选项卡中打开项目演示页面。例如

   https://127.0.0.1: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. 在项目中的所有文件中搜索和替换 "my-element" 为您的新组件名称（node_modules 文件夹除外）。

3. 在项目中的所有文件中搜索和替换 "MyElement" 为您的新类名（node_modules 文件夹除外）。

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 的指南，请参阅 发布。

编辑此页面