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 构建组件- 效果
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