陈拓 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模板提供了一些非常有用的功能:
- -语法突出显示
- -类型检查
- -代码完成
- -将鼠标悬停在文档上
- -跳转到定义
- -Linting
- -快速修复