Web Components 是一种基于标准 Web 技术的组件化开发方式，它可以让我们将复杂的 Web 应用拆分成小而简单的组件，从而提高开发效率和代码可维护性。而 Polymer-CLI 则是一个基于 Node.js 的命令行工具，它可以帮助我们更好地管理和开发 Web Components。
安装和使用 Polymer-CLI
安装 Polymer-CLI 非常简单，只需要在命令行中输入以下命令即可：
npm install -g polymer-cli
安装完成后，我们可以使用 polymer 命令来创建、构建和测试 Web Components。比如，我们可以使用以下命令创建一个新的 Polymer 应用：
polymer init polymer-3-element
这个命令会创建一个新的 Polymer 元素，并生成一些默认的文件和目录结构，如下所示：
-- -------------------- ---- -------
-----------
-------------
----
-------------
------------------
----------
-----------------
------------
---------其中，src/my-element.js 是我们的 Polymer 元素代码，index.html 是我们的应用入口文件，package.json 是我们的项目配置文件，README.md 是我们的项目说明文档。
接下来，我们可以使用以下命令启动一个本地服务器，预览我们的 Polymer 应用：
polymer serve
这个命令会启动一个本地服务器，监听默认的端口 8080，并自动打开我们的应用。我们可以在浏览器中访问 http://localhost:8080，即可看到我们的 Polymer 应用。
Polymer-CLI 命令详解
除了创建、构建和测试 Polymer 应用外，Polymer-CLI 还提供了许多其他有用的命令，如下所示：
polymer init
这个命令用于创建一个新的 Polymer 应用或元素。Polymer-CLI 支持多种模板，包括 Polymer 1.x、Polymer 2.x 和 Polymer 3.x。我们可以使用以下命令查看所有可用的模板：
polymer init --list
polymer serve
这个命令用于启动一个本地服务器，预览我们的 Polymer 应用。默认监听端口为 8080，我们可以使用 --port 参数指定其他端口：
polymer serve --port=8000
polymer build
这个命令用于构建我们的 Polymer 应用，生成可部署的静态文件。默认情况下，Polymer-CLI 会将我们的应用打包成一个 HTML 文件和一些 JavaScript 和 CSS 文件。我们可以使用 --bundle 参数将所有 JavaScript 和 CSS 文件打包成一个文件，以减少网络请求：
polymer build --bundle
polymer lint
这个命令用于检查我们的 Polymer 元素代码是否符合规范。Polymer-CLI 使用 ESLint 进行代码检查，我们可以在 .eslintrc.json 文件中配置检查规则：
{
"extends": "eslint:recommended",
"rules": {
"no-console": "off",
"indent": ["error", 2],
"quotes": ["error", "single"]
}
}polymer test
这个命令用于运行我们的 Polymer 元素测试。Polymer-CLI 使用 Web Component Tester 进行测试，我们可以在 test/index.html 文件中编写测试代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ------- ---- -------------
------- --------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- --------------------------------
------- ------------------------------------
-------
------
--------
-------------------
------------- - ------------
------------- - ------------
--------------------------------------------- ---------- -
------------
---
---------
-------
-------polymer open
这个命令用于打开我们的 Polymer 应用或元素的 GitHub 页面。Polymer-CLI 会自动检测我们的项目地址，并在浏览器中打开它：
polymer open
总结
Polymer-CLI 是一个非常有用的工具，它可以帮助我们更好地管理和开发 Web Components。通过学习 Polymer-CLI，我们可以更加高效地开发和维护我们的 Polymer 应用，提高我们的开发效率和代码质量。如果你还没有尝试过 Polymer-CLI，不妨现在就开始吧！
示例代码
以下是一个简单的 Polymer 元素示例代码，它实现了一个计数器功能：
-- -------------------- ---- -------
----- ---------------- ----------------------------------------------------------------------------------------
----------- ----------------
----------
-------
---------- -
----------- -----
-
--------
---- ------------------
---- ------------
---- ---------- --- -- -----------
---- -------------------
------------ --------------
---- ------------
---- ---------- ----
------- ---------- ------------ ------------ --------------------------------
------
---- ---------- ----
------- ---------- ------------ ------------ --------------------------------
------
------
------
------
------
------
-----------
--------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
------ --- ------------ -
------ -
------ -
----- -------
------ -
-
--
-
------------ -
-------------
-
------------ -
-------------
-
-
----------------------------------- -----------
---------
-------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d23175add4f0e0ffaa1f5a