Lit官方入门示例

陈拓 2023/12/17-2023/12/20

1. 简介

在《用Vite构建Lit项目》

https://blog.csdn.net/chentuo2000/article/details/134831884?spm=1001.2014.3001.5501

一文中我们介绍了怎样用Vite构建Lit项目。

本文我们介绍不依赖Vite的Lit入门示例。

我的开发环境还是和上文相同。

2. 官方入门示例

https://github.com/lit

2.1 js示例

• 下载示例

cd ~/lit/

git clone https://github.com/lit/lit-element-starter-js.git

• 安装依赖项

cd lit-element-starter-js

npm i

运行npm fund可用查看安装包的详细信息。

有8个漏洞（5个中等，3个高）。

运行npm audit查看漏洞详情。

最后几行蓝色部分提示npm可用升级，我的当前版本：

如无必要，不要升级。

• 运行示例

npm run serve

在浏览器上测试：

http://192.168.137.9:8000/

2.2 ts示例

• 下载示例

cd ~/lit/

git clone https://github.com/lit/lit-element-starter-ts.git

• 安装依赖项

cd lit-element-starter-ts

npm i

• 构建

此示例使用TypeScript编译器生成在现代浏览器中运行的JavaScript。

所以要构建组件的JavaScript版本：

npm run build

生成js文件：

要监视文件并在修改文件时重新生成，请在另一个命令窗口中运行以下命令：

npm run build:watch

TypeScript编译器和lit分析器都被配置为非常严格。您可能需要更改“tsconfig.json”，使其不那么严格。

• 运行示例

npm run serve

在浏览器上测试：

http://192.168.137.9:8000/

3. VSCode插件

如果您使用VSCode，我们强烈建议您使用lit-plugin extension插件

https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

它为lit html模板提供了一些非常有用的功能：

1. -语法突出显示
2. -类型检查
3. -代码完成
4. -将鼠标悬停在文档上
5. -跳转到定义
6. -Linting
7. -快速修复