4lib_component 中文文档教程

Question

4LibComponents

Use this lib for your project

要使用此库，请先通过运行安装它：

npm i 4lib_component

然后通过添加 HTML head 在您的 HTML 中使用它：

<script type="module" src="/node_modules/4lib_component/src/components/an-element.ts"></script>

或者使用以下方法将其导入您的 js/ts：

import {MyElement} from '/node_modules/4lib_component/src/components/my-element';

最后，您可以在 HTML 中使用带有元素标签的它：

<my-element></my-element>

Edit this lib

您可以测试您的元素与 index.html 文件并通过使用以下命令运行服务器：

yarn dev

服务器将在您的本地主机上启动。 引用文件的每次修改 在 src/components.ts 中将启动重新编译。

Compile this lib

只需运行以下命令：

npm run build

编译后的库将位于 dist/ 文件夹中。

将有两个 .js 文件，每个模块导入样式一个：

• es, for the ESM (EcmaScript Modules) module specification
• umd, for the UMD (Universal Modules) module specification

每个文件都是完全独立的并且包含相同的代码，只是以两种不同的方式编写。

Important notes to consider

Custom Elements Names

• 不要使用标准名称，如标签（棘手的名称，因为您的元素不会出现但不会抛出错误）

• 尊重 html 规范

Use 4Atoms

要在您的模板中使用另一个 lit-element，只需导入其模块以产生副作用，如下所示。

import 'your/path/here'

然后，只需使用 lit-element 标签。

import './general-kenobi.ts'
import {customElement} from 'lit-element';

@customElement("general-grievous")
export class GeneralGrievous extends LitElement {
    render: () => html`
        <h1>Hello there !</h1>
        <general-kenobi></general-kenobi>
    `
}