前言
如今，在前端开发中，创建自定义 web 组件已经成为了普遍需求。但是，每次都从头开始搭建工作环境十分繁琐，有没有什么方便快捷的方式呢？这就引入了今天介绍的 npm 包 create-stencil-app。
create-stencil-app 简介
Stencil 是一个 Web 组件库，它使用了 Web Components 标准，并支持现代化应用程序框架。Stencil 提供了一个零配置的 CLI 工具来帮助你快速创建工作环境，以及自定义组件等。
create-stencil-app 可以帮助你一键创建一个新的 Stencil 项目，这将会包含一个 WebView 应用程序，并支持开发环境以及交互式演示。值得一提的是，Stencil 的组件是“零耦合”，即两个组件之间无需再次引用对方即可进行交互。
create-stencil-app 安装
在使用 create-stencil-app 之前，需要先安装 Node.js 和 npm。
- 官方网站：https://nodejs.org/en/
- 官方下载：https://nodejs.org/en/download/
- 非官方下载：https://npm.taobao.org/mirrors/node/
安装完成后，我们就可以在命令行工具中使用 npm 命令了。接下来，使用以下命令来安装 create-stencil-app：
npm i -g create-stencil-app
create-stencil-app 使用
使用 create-stencil-app 可以轻松创建一个新的 Stencil 项目，并通过启动本地服务器来预览它。
在命令行工具中，输入以下命令：
create-stencil-app my-app cd my-app npm start
这将会为你创建一个名为 my-app 的项目，并使用 npm，自动安装 Stencil 和依赖项。
使用上述命令后，你将会看到在浏览器中打开了一个网页，并预览了一个模板组件。这表示你已经成功创建了一个基于 Stencil 的项目，并预览了它。
开发自定义组件
接下来，我们来添加一个自定义组件。找到项目目录并将其打开，你会发现 src/components 文件夹已经包含了一个名为 “my-component” 的子文件夹，其中包含了一个 TypeScript 文件和其他相关项目文件。
在此文件夹中，通过编辑 my-component.tsx 文件，即可定义和开发自己的组件。例如，在 my-component.tsx 文件中，使用以下代码来定义一个简单的按钮组件：
-- -------------------- ---- -------
------ - ---------- - - ---- ----------------
------------
---- ------------
--------- ----------------
------- -----
--
------ ----- -------- -
-------- -
------ ------------- -------------
-
-然后，我们需要通过更新 src/index.html 来引入自定义组件。在 body 标签中，添加以下一行代码：
<my-button></my-button>
允许 npm start 命令来重新编译并刷新浏览器，你会发现添加的自定义组件在浏览器中已经成功显示了。
create-stencil-app 总结
在本文中，我们详细介绍了 create-stencil-app 的安装和基本使用方法，并通过开发简单的自定义组件来展示了其强大的功能。create-stencil-app 还包括许多可能用得到的其他功能，可以在其官方文档中进行深入学习。
通过本文的学习，你现在已经可以快速创建自己的 Stencil 项目，并使用自己的组件进行开发。希望这个教程对你的技术成长有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60059bb481e8991b448ed450