stenciljs 学习一 web 组件开发

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