lit———组件封装引入项目的逻辑

129 阅读1分钟

1、场景:实例化类的方式new MyComponent({})实现。

(1)index.ts文件:实例化类的方式

image.png

(2)项目中实现该方法

image.png

(3)本地调试:由于是通过实例化类的方式实现,本地调试时可自定义文件实现实例化类的方式。 image.png

2、场景:直接引入该组件,在项目中直接通过<my-component></my-component>的方式实现

(1)inde.ts文件:

image.png

(2)项目中直接使用

image.png

(3)本地调试:直接引入

image.png

注意:由于该组件本身是一个项目,所以在打包引入以后需要在vite.config.js中设置入口文件,即(1)的文件

image.png