README

Stencil 组件模板

这是一个使用 Stencil 构建 Web 组件的入门项目。

Stencil 同样非常适合构建完整的应用程序。为此，请使用 stencil-app-starter。

Stencil

Stencil 是一个用于使用 Web 组件构建快速 Web 应用程序的编译器。

Stencil 将最受欢迎的前端框架的最佳概念结合到一个编译时而不是运行时工具中。Stencil 使用 TypeScript、JSX、一个微小的虚拟 DOM 层、高效的单向数据绑定、异步渲染管道（类似于 React Fiber）以及开箱即用的懒加载，并生成 100% 标准化的 Web 组件，这些组件在任何支持 Custom Elements v1 规范的浏览器中运行。

Stencil 组件只是 Web 组件，因此它们可以在任何主要框架或没有任何框架的情况下工作。

入门

要使用 Stencil 构建新的 Web 组件，请将此存储库克隆到新的目录中

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>）。这是因为生成的组件与 Stencil 几乎没有关系；它只是一个 Web 组件！

相反，使用适合您公司或任何相关组件组的名称前缀。例如，所有由 Ionic 生成的 Web 组件都使用前缀 ion。

使用此组件

脚本标签

发布到 NPM
在 index.html 的头部放置一个类似这样的脚本标签 <script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script>
然后您可以在模板、JSX、HTML 等任何地方使用该元素

Node 模块

运行 npm install my-component --save
在 index.html 的头部放置一个类似这样的脚本标签 <script src='node_modules/my-component/dist/mycomponent.js'></script>
然后您可以在模板、JSX、HTML 等任何地方使用该元素

在 stencil-starter 应用中

运行 npm install my-component --save
添加对 npm 包的导入 import my-component;
然后您可以在模板、JSX、HTML 等任何地方使用该元素

pres1av / woo-product-gift

维护者

详细信息