使用Jolt构建Web组件

Jolt是一个JavaScript框架，用于构建快速的Web组件。它使用幕后的Web组件为其组件体系结构提供动力。这使您构建的组件可以跨框架使用，也可以完全不使用框架。

建立一个新项目

建立一个新的项目非常简单。

首先，我们需要安装Jolt CLI。

npm install -g @jolt/cli

完成此操作后，我们可以使用create命令生成项目。

jolt create my-app

生成项目后，我们可以进入项目文件夹并运行serve命令。

# Navigate to the project folder
cd app-name

# Launch the development server
jolt serve

默认情况下，新应用应在上运行http://localhost:3000/。如果您使开发服务器保持运行状态，它将随着您所做的更改来更新页面。

构建一个Hello World组件

我们可以使用genorgenerate命令创建一个新组件。

默认情况下，会生成一个类组件，对于本示例，我们将生成一个功能组件，因此我们需要将该--function标志添加到命令中。

jolt gen hello-world --function

现在，我们应该有一个hello-world文件夹，其中包含hello-world.js和hello-world.css文件。

让我们打开hello-world.js文件，我们会发现。

import { Component, html } from "jolt";
import style from "./hello-world.css";

export const HelloWorld = () => {
    return html``;
};

Component.create({
    name: "hello-world",
    styles: [style]
}, HelloWorld);

Jolt使用模板文字而不是JSX来编写html，因此我们所有的html代码都将放在html''表达式内。如果您使用的是Visual Studio Code，则可以使用lit-html扩展名对此进行语法突出显示。

在向组件添加我们的hello world html之后，它应如下所示：

export const HelloWorld = () => {
    return html`
        <h1>Hello World</h1>
    `;
};

我们需要做的下一件事是使用我们的hello-world组件。在里面app.js我们可以删除所有代码

在app.js添加以下代码：

import { Component, html } from "jolt";
import "./components/hello-world";

const App = () => {
    return html`
        <hello-world />
    `;
}

Component.create({ name: "app-root" }, App);

Component.mount(App, document.body);

这将导入我们的hello-world组件，并在标记内渲染该组件。

现在，您应该在页面上看到“ Hello World”。

样式化您的组件。

当我们生成组件时，它还生成了一个hello-world.css文件。

在内部，hello-world.js我们将css文件导入为style，然后将其传递到components style选项中。

默认情况下，Jolt组件使用ShadowDOM，因此所有标记和样式都限于组件本身。因此，当我们添加h1样式规则时，它只会影响组件内部的h1元素。

让我们设置hello-world组件的样式。

h1 {
    color: red;
    font-size: 50px;
}

这里的所有都是它的。现在，我们应该有一个hello-world组件，该组件以大红色字母在屏幕上显示Hello World。