框架介绍
stenciljs
是用于构建可重用、可扩展的设计系统的工具链。生成在每个浏览器中运行的小型、超快且 100% 基于标准的 Web Component。
更对介绍请参考官方网站
创建项目
使用脚手架创建项目
pnpm create stencil #如下图
使用其它的包管理器,
npm init stencil
yarn create stencil
项目目录
创建组件
pnpm generate web-text #web-text是组件名
命令执行后,如下图
确定后,如下图
创建组建后的目录如下图
构建和测试
pnpm run start #包含运行测试
pnpm run build #构建组件
pnpm run start之后的样子
组件说明
使用tsx 进行开发,类似react 的生命周期模型,类似ng 的开发方式(装饰器,注解。。。)
import { Component, Prop, h } from '@stencil/core';
import { format } from '../../utils/utils';
@Component({
tag: 'my-component', // 组件名称
styleUrl: 'my-component.css',
shadow: true,
})
export class MyComponent {
/**
* The first name
*/
@Prop() first: string;
/**
* The middle name
*/
@Prop() middle: string;
/**
* The last name
*/
@Prop() last: string;
private getText(): string {
return format(this.first, this.middle, this.last);
}
render() {
return <div>Hello, World! I'm {this.getText()}</div>;
}
}
Css 样式
div {
display: block;
font-size: 30px;
background-color: blueviolet;
color: white;
}
改后的效果
结束语
第一部分至此结束了。