框架介紹

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

改後的效果

結束語

第一部分至此結束了。