Stenciljs 学习之搭建项目

框架介绍

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;
}

改后的效果