0
点赞
收藏
分享

微信扫一扫

Stenciljs 学习之搭建项目

框架介绍

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

更对介绍请参考​​官方网站​​

创建项目

使用脚手架创建项目

pnpm create stencil #如下图

Stenciljs 学习之搭建项目_webcomponent

Stenciljs 学习之搭建项目_创建项目_02

Stenciljs 学习之搭建项目_css_03

使用其它的包管理器,

npm init stencil

yarn create stencil

项目目录

Stenciljs 学习之搭建项目_webcomponent_04

创建组件

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

命令执行后,如下图

Stenciljs 学习之搭建项目_Stenciljs_05

确定后,如下图

Stenciljs 学习之搭建项目_Stenciljs_06

创建组建后的目录如下图

Stenciljs 学习之搭建项目_css_07

构建和测试

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

pnpm run start之后的样子

Stenciljs 学习之搭建项目_css_08

组件说明

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

改后的效果

Stenciljs 学习之搭建项目_webcomponent_09

结束语

第一部分至此结束了。



举报

相关推荐

0 条评论