前言
Polymer 是 Google 推出的一个 Web 组件库，可以帮助我们开发可重复使用的 Web 组件，方便我们进行 Web 开发。
generator-polymer-3-ts-element 是一个用于生成 Polymer 3.0 组件的 Yeoman 生成器，并支持使用 Typescript 进行开发。
在本文中，我们将学习如何使用 generator-polymer-3-ts-element 生成 Polymer 3.0 组件。
环境准备
在使用 generator-polymer-3-ts-element 前，我们需要确保安装了以下工具：
- Node.js（版本要求： v6.0.0 或以上）
- npm（版本要求： v5.2.0 或以上）
安装 generator-polymer-3-ts-element
我们可以使用以下命令来安装 generator-polymer-3-ts-element：
npm install -g yo generator-polymer-3-ts-element
安装完成后，我们可以使用以下命令来验证是否安装成功：
yo polymer-3-ts-element
如果没有报错，说明安装成功了。
使用 generator-polymer-3-ts-element
生成组件
在终端中执行以下命令来生成 Polymer 3.0 组件：
yo polymer-3-ts-element
执行完命令后，会出现一个交互式的命令行界面，我们需要根据提示输入一些必要信息，例如组件名称、组件描述、组件命名空间等等。
输入完信息后，就会自动生成一个 Polymer 3.0 组件，包含以下文件：
-- -------------------- ---- ------- ----------- --- ----- - --- ---------- - --- ------------------ --- ---- - --- -------------- - --- ------------- - --- ------------------ --- ----- - --- -------- - - --- ---------- - --- ---------- --- --------- --- ---------- --- ------- --- ----------------- --- ------------
其中，src/ 目录下是组件主要代码，test/ 目录下是组件测试代码，demo/ 目录下是组件演示代码。
编写组件
在 my-element 目录下，我们可以通过修改 src/my-element.js 文件来编写组件代码。
以下是一个简单的组件示例代码：
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
-------
----- -
-------- ------
-------- -----
------------ -----------
-
-- -
------- --
---------- -----
-
--------
---------- --------------
--
-
------ --- ------------ -
------ -
----- -
----- -------
------ -------
-
--
-
-
----------------------------------- -----------上述代码定义了一个称为 my-element 的组件，组件中使用了 Polymer 的 Shadow DOM 特性来封装组件样式。
测试组件
在 my-element 目录下，我们可以通过运行以下命令来测试组件：
npm test
执行完命令后，会运行 Mocha 测试框架来测试组件的行为是否正常。
演示组件
在 my-element 目录下，我们可以通过运行以下命令来启动演示服务器：
npm start
执行完命令后，会起一个本地服务器来展示组件的演示效果，我们可以在浏览器中访问 http://localhost:8080 来查看演示效果。
总结
本文介绍了如何使用 generator-polymer-3-ts-element 生成 Polymer 3.0 组件，以及如何编写、测试和演示 Polymer 3.0 组件。希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067350890c4f72775838bc