stenciljs 学习一 web 组件开发

2024-09-14 00:33:41

stenciljs 介绍参考官方网站，或者 https://www.cnblogs.com/rongfengliang/p/9706542.html

创建项目

使用脚手架工具

npm init stencil

更新版本（实际上是bug fix）

npm install @stencil/core@latest --save-exact

效果

项目结构

构建&&测试

构建

yarn start // 包含运行测试

yarn build 构建组件

效果

使用yarn start 同时进行测试

demo 组件说明

使用tsx 进行开发，类似react 的生命周期模型,类似ng 的开发方式（装饰器，注解。。。）

import { Component, Prop } from '@stencil/core';

@Component({

tag: 'my-component',

styleUrl: 'my-component.css',

shadow: true

})

export class MyComponent {

@Prop() first: string;

@Prop() last: string;

render() {

return (

<div>

Hello, World! I'm {this.first} {this.last}

</div>

);

}

}

添加css

div {

font-size: 50px;

background-color: cadetblue;

}

编译效果

参考资料

https://stenciljs.com/docs/getting-started

最新文章

热门文章