模板组件启动器

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

Stencil对于构建整个应用程序也很有用。为此，使用 stencil-app-starter 代替。

钢网

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

Stencil将最流行的前端框架的最佳概念结合到编译时而不是运行时工具中。Stencil采用TypeScript、JSX、一个微小的虚拟DOM层、高效的单向数据绑定、异步渲染管道（类似于React Fiber）和延迟加载，生成100%基于标准的Web组件，这些组件可以在任何支持自定义元素v1规范的浏览器中运行。

模板组件只是Web组件，因此它们可以在任何主要框架中工作，或者根本不需要框架。

开始使用

要开始使用Stencil构建一个新的web组件，将这个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>）. 这是因为生成的组件与Stencil几乎没有关系；它只是一个web组件！

相反，应该使用适合您的公司或一组相关组件的任何名称的前缀。例如，Ionic生成的所有web组件都使用这个前缀 ion.

使用这个组件

对于使用Stencil构建的web组件，我们推荐三种策略。

这三种策略的第一步是 发布到NPM.

脚本标签

• 放一个类似这样的脚本标签 <script src='https://unpkg.com/[email protected]/dist/my-component.esm.js'></script> 在index.html的头部
• 然后你可以在模板、JSX、html等的任何地方使用元素

节点模块

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

在一个模板入门应用中

• 运行 npm install my-component --save
• 向npm包中添加一个导入 import my-component;
• 然后你可以在模板、JSX、html等的任何地方使用元素