Stencil 组件启动器

这是一个使用Stencil建立独立网络组件的启动项目.

Stencil对于整个应用程序的建造也非常出色. 这点,请使用 速记应用程序启动器 换句话说.

斯坦西尔

Stencil是使用Web组件构建快网络应用程序的编译器.

Stencil将最受欢迎的前端框架的最佳概念整合为一个编译时间而不是运行时间工具. Stencil取取TypeScript,JSX,一个微小的虚拟DOM层,高效的单向数据绑定,同步渲染管道(类似于React Fiber),并懒散地从盒子中装入,生成100%基于标准的Web组件,运行在支持自定义元素v1 spec的任何浏览器中.

Stencil组件只是Web组件,所以它们在任何主要框架中工作,或者根本没有任何框架.

开始

要开始使用 Stencil 构建一个新的网络组件, 请将此 repo 复制到一个新的目录 :

git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin

运行 :

npm install
npm start

为了建造生产部件,运行:

npm run build

要对组件进行单元测试,请运行:

npm test

需要帮忙吗? 看看我们的医生 这里。 。 。 .

命名组件

在创建新组件标记时,我们建议 没有 使用 stencil 在组件名称中(前: <stencil-datepicker>) (中文(简体) ). 这是因为生成的组件与斯通西尔无关;它只是一个网络组件!

取而代之的是,使用适合您公司或任何名称的前缀来表示一组相关的组件. 例如,所有Ionic生成的网页组件都使用前缀 ion。 。 。 .

使用此组件

我们建议采用三种战略,使用由Stencil构建的网络组件.

所有这些战略的第一步是: 向国家预防机制公布。 。 。 .

脚本标签

• 设置类似此的脚本标签 <script src='https://unpkg.com/[email protected]/dist/my-component.esm.js'></script> 在索引.html的首页
• 然后可以在模板、JSX、html等中任意使用元素

节点模块

• 运行 npm install my-component --save
• 设置类似此的脚本标签 <script src='node_modules/my-component/dist/my-component.esm.js'></script> 在索引.html的首页
• 然后可以在模板、JSX、html等中任意使用元素

在一个启动程序中

• 运行 npm install my-component --save
• 添加导入到 npm 包 import my-component;
• 然后可以在模板、JSX、html等中任意使用元素