Jolt是一个JavaScript框架,用于构建快速的Web组件

作者 : IT 大叔 本文共1551个字,预计阅读时间需要4分钟 发布时间: 2020-10-13

使用Jolt构建Web组件

Jolt是一个JavaScript框架,用于构建快速的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。

免责声明:
1. 本站资源转自互联网,源码资源分享仅供交流学习,下载后切勿用于商业用途,否则开发者追究责任与本站无关!
2. 本站使用「署名 4.0 国际」创作协议,可自由转载、引用,但需署名原版权作者且注明文章出处
3. 未登录无法下载,登录使用金币下载所有资源。
IT小站 » Jolt是一个JavaScript框架,用于构建快速的Web组件

常见问题FAQ

没有金币/金币不足 怎么办?
本站已开通每日签到送金币,每日签到赠送五枚金币,金币可累积。
所有资源普通会员都能下载吗?
本站所有资源普通会员都可以下载,需要消耗金币下载的白金会员资源,通过每日签到,即可获取免费金币,金币可累积使用。

发表评论