gpt4 book ai didi

node.js - 如何在实时 Web 服务器上部署/使用 lit-html、lit-element

转载 作者:行者123 更新时间:2023-12-02 02:00:30 26 4
gpt4 key购买 nike

我开始尝试 lit-html 和 lit-elements,尝试使用它,现在我遇到了问题,我无法找到如何在线发布此类代码。从未在在线平台上使用过 Node-js 包,只使用过其中的一些代码。通常我会构建普通的 php/html 模板,但我想尝试一下。

在本地构建一些有效的测试用例。但在谷歌上到处搜索,找出如何将这种代码在线发布到互联网上。我正在使用具有许多选项(例如 SSH)的共享主机但不知道该怎么做才能让它工作,它不可能像在我的服务器上运行 npm install 那么简单,对吗?

最佳答案

关于 Web 组件、lit-html 和 friend 的新世界的最好的事情是,我们实际上不需要 npm,我们不需要编译,或者根本不需要任何构建步骤

现在,我们可以使用 es-modules 直接从 CDN 加载内容,例如 unpkg 或 jsdelivr

查看 haunted's github readme 上的演示— 这就是您所需要的!

<!doctype html>
<html lang="en">

<my-counter></my-counter>

<script type="module">
import { html } from 'https://unpkg.com/lit-html/lit-html.js';
import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

function Counter() {
const [count, setCount] = useState(0);

return html`
<div id="count">${count}</div>
<button type="button" @click=${() => setCount(count + 1)}>Increment</button>
`;
}

customElements.define('my-counter', component(Counter));
</script>

check it out running live on this codepen example

👋追逐

关于node.js - 如何在实时 Web 服务器上部署/使用 lit-html、lit-element,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57716346/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com