入门套件

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. 在项目中的所有文件中搜索并替换 "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：

• JavaScript 入门项目 README
• TypeScript 入门项目 README

有关将你的组件发布到 npm 的指南，请参见发布。