入门套件

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

   要监视文件并在文件修改时重新构建，请在单独的终端中运行以下命令：

   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>你好，${this.name}！</h1>
        <button @click=${this._onClick}>
          点击次数：${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 的指南，请参阅发布。