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

改后的效果

结束语

第一部分至此结束了。