简介
Slush-polyapp-builder 是一个基于 Slush 和 Polymer CLI 的前端项目生成器。它可以帮助你快速构建一个基于 Polymer 的 Web 应用程序，不需要手动管理文件和配置。
本文将介绍 slush-polyapp-builder 的安装，使用方法和示例代码，帮助你更好地实践这个工具。
安装
在开始之前，需要先安装 node.js 和 npm。然后，在命令行中使用以下命令安装 slush 和 slush-polyapp-builder：
npm install -g slush slush-polyapp-builder
使用方法
在安装完成后，就可以使用 slush-polyapp-builder 生成一个新的 Polymer 应用程序。下面是生成应用程序的步骤：
- 创建一个新的目录，例如
my-polymer-app。 - 进入目录并在命令行中运行以下命令：
slush polyapp-builder
- 接着，根据提示输入应用程序名称、作者、描述等信息。
- 完成之后，你将得到一个包含预定义文件和常规配置的 Polymer 应用程序。
现在你可以在你的编辑器中打开这个目录，或者直接在浏览器中访问它的 index.html 文件，查看预览效果。
文件结构
生成的应用程序包含了一些最常用的文件和配置。此处是一个典型的 slush-polyapp-builder 应用程序的文件结构：
-- -------------------- ---- -------
--- ----------
--- -----------
--- ----------
--- -------
--- ------------
--- ---------
--- ---
--- --- ------
--- --- -------
--- --- ------
--- --- -----
--- ----
--- ---
--- ----bower.json定义了项目的依赖关系。gulpfile.js包含了构建任务和工具的设置。index.html是 Polymer 应用的入口文件。LICENSE可选的开源协议。package.json包含了项目的元数据和依赖关系。README.md包含了项目的文档和说明。src包含了应用程序的所有源代码和资源文件。src/images包含了图片资源。src/scripts包含了 JavaScript 脚本文件。src/styles包含了 CSS 样式文件。src/views包含了应用程序的视图文件。test包含了应用程序的测试代码，可选。
示例代码
现在，我们将创建一个简单的示例程序，演示如何在 slush-polyapp-builder 中生成自定义元素。
创建自定义元素
首先，在 src 目录下创建一个新的 HTML 文件。在这个文件中，我们将创建一个简单的自定义元素。
-- -------------------- ---- -------
---- ------------------------- ---
----- ------------ -----------------------------------------------------------
----------- ----------------
----------
--------- -----------
-----------
--------
----- --------- ------- --------------- -
------ --- ---- - ------ ------------- -
-
----------------------------------- -----------
---------
-------------这个元素非常简单，只是显示一个标题。此外，在 JavaScript 部分，我们通过 class 关键字创建了一个继承自 Polymer.Element 的自定义元素，并使用 define 方法注册了它。
引入自定义元素
接下来，在 index.html 文件中引入这个自定义元素。
-- -------------------- ---- ------- ---- ---------- --- --------- ----- ------ ------ --------- ------- ----------- ------- -------------------------------------------------------------------------- ----- ------------ ----------------------------------- ------- ------ ------------------------- ------- -------
在头部引入自定义元素，在 body 中使用了自定义元素。
构建应用程序
最后，运行 gulp serve 命令构建应用程序，然后打开浏览器并访问这个地址就可以看到 Hello World 了。
cd my-polymer-app gulp serve
总结
通过使用 slush-polyapp-builder 来生成 Polymer 应用程序，可以更快地开始项目开发，并减少出错的可能性。在创建应用程序时，你需要提供一些基本信息，然后生成器就会完成基本文件和配置的设置。
同时，这个工具还可以帮助你快速构建自定义元素，拓展应用程序的功能。
希望本文对你了解 slush-polyapp-builder 的使用有所帮助，让你能够快速开始你的 Polymer 应用程序的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055fe781e8991b448dd8bd