Stenciljs 学习之搭建项目

╰+哭是因爲堅強的太久メ 2024-03-17 18:27 23阅读 0赞

### 框架介绍 ###

`stenciljs` 是用于构建可重用、可扩展的设计系统的工具链。生成在每个浏览器中运行的小型、超快且 100% 基于标准的 Web Component。

更对介绍请参考[官方网站][Link 1]

### 创建项目 ###

#### 使用脚手架创建项目 ####

pnpm create stencil #如下图

![b7f0b968b52e1c6b9f1d2679ceaab74a.png][]

![044dd2e20fcd8d0ef97ec558d7a3c636.png][]

![e05a001e9ec661ea7359d91d47314eb7.png][]

> 使用其它的包管理器，
> 
> npm init stencil
> 
> yarn create stencil

#### 项目目录 ####

![078ea23061c0958f5a839751b7cab7e3.png][]

### 创建组件 ###

pnpm generate web-text #web-text是组件名

命令执行后，如下图

![a88f7b8f52e0f142284d973f41f43ffa.png][]

确定后，如下图

![94524f234a209ec7fcf59f5298409d57.png][]

创建组建后的目录如下图

![4bffb383765cb66ae801c880e7a48bda.png][]

### 构建和测试 ###

pnpm run start #包含运行测试 
    pnpm run build #构建组件

#### pnpm run start之后的样子 ####

![71aaf9de3d5c841f6a2143b815a7c64d.png][]

### 组件说明 ###

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

**改后的效果**

![55250b635b0daddf272ffd84d1892888.png][]

[Link 1]: https://stenciljs.com/
[b7f0b968b52e1c6b9f1d2679ceaab74a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/5b4a622450ee4c978922987a3f077bb4.png
[044dd2e20fcd8d0ef97ec558d7a3c636.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/7f759c0f775b4b4ca9a212948b2e7f14.png
[e05a001e9ec661ea7359d91d47314eb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/9341837aab5d41f4bdf0bfb163b528c6.png
[078ea23061c0958f5a839751b7cab7e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/139f2b8e859140fe8029ac131e9dc25a.png
[a88f7b8f52e0f142284d973f41f43ffa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/447327f446a84a7f82665e913414f12c.png
[94524f234a209ec7fcf59f5298409d57.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/139d409b27e2482796dc463b1d70b616.png
[4bffb383765cb66ae801c880e7a48bda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/2dcf6729151d46c2b27d642dba5283b6.png
[71aaf9de3d5c841f6a2143b815a7c64d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/8e2456814c4b43d1a40be0e04302fa97.png
[55250b635b0daddf272ffd84d1892888.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/15/87bd757cfd824c4882f560d56786b2ef.png