不用vdom的lit框架学习3：代码结构初步解析

原创

已于 2023-03-31 15:58:33 修改 · 577 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #前端框架 #web component #lit

于 2023-03-24 15:54:10 首次发布

文章介绍了lit框架的基础知识，包括如何创建和使用自定义组件，以及组件的properties定义、render函数的动态渲染和样式设置。通过一个简单的my-element.js组件示例，解释了构造器、事件处理和样式定义。文章还提到了与React和Vue的比较，并鼓励读者通过实践操作来熟悉lit。

这是lit框架的系列学习文章，跳转查看其他章节

不用vdom的lit框架学习1：安装和编译
不用vdom的lit框架学习2：挠头的web component（兼容性说明，必看）
不用vdom的lit框架学习3：代码结构初步解析
不用vdom的lit框架学习4：properties详细定义

在补充了web component的一些基础性现状，明确了lit应用的一些适配现状之后，我们进一步来看看代码部分。

初始化安装之后，在目标目录会生成如下结构的初始化页面

│  index.html  //主页面文件
│  package.json
│  vite.config.js  //vite编译配置文件
│  
├─public  //html中直接调用的图片等其他媒体文件
│      vite.svg 
│      
└─src //参与编译的源码文件
    │  index.css //主css样式文件
    │  my-element.js //名为my-element的自定义模块
    │