前言
在前端开发中，Polymer 是一个非常强大的框架。它可以在开发 Web 应用程序和 Web 组件时，提供诸多便利，减少代码量和开发时间。
本篇文章将讲解如何使用 npm 包 generator-polymer-init-polymer-3-element 来快速创建一个基于 Polymer 3 的 Web 组件。
前置条件
在使用 generator-polymer-init-polymer-3-element 之前，你需要先安装 Node.js 和 npm。
请前往 Node.js 官网 下载并安装 Node.js，npm 也会随之安装。
安装
使用 npm 安装 generator-polymer-init-polymer-3-element，执行以下命令：
npm install -g generator-polymer-init-polymer-3-element
创建项目
执行以下命令来创建一个名为 my-element 的 Web 组件：
polymer init polymer-3-element my-element
此命令创建了一个包含必要元素和文件的文件夹 my-element，包括：
-- -------------------- ---- -------
-----------
--- ----------
--- -------
--- ---------
--- -----
- --- ----------
--- ----------
--- -----------------
--- ------------
--- ------------
--- ----
- --- -------------
- --- ----------
--- -----
--- ------------------文件结构
.gitignore
该文件定义了存储库中不需要跟踪的文件和文件夹列表。
LICENSE
该文件是一个开源许可证文件。
README.md
该文件包含了你可以在项目中记录任何有用的信息，如项目说明、安装说明等等。
demo/index.html
该文件是一个示例演示页面，展示如何使用你的组件。
index.html
该文件是组件文档声明文件，包含组件名称和版本等信息，也可以定义自定义 HTML 元素。
package-lock.json
该文件是 npm 自动生成的文件，记录了精准的依赖版本和 SHA 加密和相关信息，用于确保项目的一致性。
package.json
该文件包含项目的信息和依赖项列表，用于管理 npm 依赖包。
polymer.json
该文件包含项目的 Polymer 配置，例如 Polymer 编译器的配置，用于构建和打包项目。
src/my-element.js
该文件包含了你的 Web 组件的 JavaScript 代码。
src/styles.css
该文件包含了你的 Web 组件的 CSS 代码。
test/my-element_test.js
该文件包含了你的 Web 组件的测试文件。
修改组件代码
在 src/my-element.js 文件中，你可以看到以下代码：
-- -------------------- ---- -------
------ - --------------- ---- - ---- --------------------------------------
----- --------- ------- -------------- -
------ --- ---------- -
------ -----
-------
----- -
-------- ------
-
--------
-----
--- - ------- --------
------
--
-
-
------------------------------------------ -----------此代码定义了 Polymer 元素 'my-element'，在窗口自定义元素中定义了这个元素。
-- -------------------- ---- -------
------ --- ---------- -
------ -----
-------
----- -
-------- ------
-
--------
-----
--- - ------- --------
------
--此代码定义了元素的模板。请按照个人需求修改模板内容。
window.customElements.define('my-element', MyElement);此代码将自定义元素 'my-element' 注册到文档中。
运行项目
在控制台进入 my-element 文件夹，运行以下命令：
polymer serve
此命令将启动本地开发服务器，运行你的组件。
在浏览器中访问 localhost:8080/demo，你将看到已经运行的组件示例。
链接
generator-polymer-init-polymer-3-element
结论
本文介绍了如何使用 npm 包 generator-polymer-init-polymer-3-element 来创建一个基于 Polymer 3 的 Web 组件。
该 npm 包提供了便捷的方式来创建 Polymer 组件。此外，Polymer 强大的功能可为 Web 应用程序和 Web 组件的开发过程带来巨大的简化和效率提升。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005609e81e8991b448dedd2