Stenciljs 学习之搭建项目

简介: Stencil 是一个生成 Web Components(更确切地说,是自定义元素)的编译器。Stencil 将最流行的框架的最佳概念结合到一个简单的构建时工具中。学习一个框架肯定是重创建项目开始啦!现在就让我们一起学习一下怎么创建项目吧。

框架介绍

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

更对介绍请参考官方网站

创建项目

使用脚手架创建项目

pnpm create stencil #如下图

create-1.png
create-2.png
create-3.png

使用其它的包管理器,

npm init stencil

yarn create stencil

项目目录

create-4.png

创建组件

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

命令执行后,如下图

create-5.png

确定后,如下图
create-6.png

创建组建后的目录如下图

create-7.png

构建和测试

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

pnpm run start之后的样子

create-8.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;
}

改后的效果

create-9.png

结束语

第一部分至此结束了。

相关文章
|
JavaScript
源码学习:Vite中加载环境变量(loadEnv)的实现
源码学习:Vite中加载环境变量(loadEnv)的实现
7695 0
|
存储 JSON 前端开发
前端下载文件以及上传图片预览,顺便了解arrayBuffer和blob
前端下载文件以及上传图片预览,顺便了解arrayBuffer和blob
1353 0
|
10月前
|
SQL IDE 数据库连接
IntelliJ IDEA处理大文件SQL:性能优势解析
在数据库开发和管理工作中,执行大型SQL文件是一个常见的任务。传统的数据库管理工具如Navicat在处理大型SQL文件时可能会遇到性能瓶颈。而IntelliJ IDEA,作为一个强大的集成开发环境,提供了一些高级功能,使其在执行大文件SQL时表现出色。本文将探讨IntelliJ IDEA在处理大文件SQL时的性能优势,并与Navicat进行比较。
163 4
|
10月前
|
算法 Python
SciPy 教程 之 SciPy 优化器 3
SciPy 的 optimize 模块提供了多种最优化算法,如查找函数最小值或方程的根。通过 `optimize.root` 可以解决非线性方程,而 `minimize` 函数则用于最小化目标函数,支持多种优化方法。例如,使用 BFGS 方法最小化函数 \(x^2 + x + 2\),可得到最小值 1.75 和对应的 x 值 -0.5。
188 1
什么年代了,你还在手动配置vite路径别名?
【8月更文挑战第3天】Vite路径别名配置,简化项目引入
1645 3
|
弹性计算 固态存储 开发者
阿里云99元服务器,性价比之王!新老用户都值得拥有!
阿里云99元服务器ECS经济型e实例,2核2G配置,3M固定带宽,40G ESSD Entry系统盘,适合个人开发者、学生和小微企业用于中小型网站建设和轻量级应用。CPU基于Intel Xeon Platinum架构,网络带宽支持最高2Gbps突发,云盘提供0.8万IOPS。3M带宽下载速度达384KB/s,上传速度1280KB/s,不限流量。续费仍为99元/年
636 0
|
内存技术
设置node默认版本—踩坑
设置node默认版本—踩坑
735 0
|
Shell 网络安全 Python
SSL 证书过期巡检脚本 (Python 版)
SSL 证书过期巡检脚本 (Python 版)
|
JavaScript 前端开发 算法
JavaScript中toFixed、Math.round和四舍五入、银行家舍入法之间的关系
JavaScript 的 toFixed 方法使用定点表示法来格式化一个数值,数字.toFixed(要保留几位小数),参数为小数点后数字的个数,介于 0 到 20(包括)之间,默认 0,返回值为使用定点表示法表示给定数字的字符串,该数值在必要时进行四舍五入,不足位数时会直接用 0 来填充小数部分
|
安全 开发工具 数据安全/隐私保护
MacOS安装FFmpeg
MacOS安装FFmpeg
9996 0