使用差异硫化

在项目的根目录中,确保安装了 Bower(npm install -g bower)并运行 bower init。这将在项目的目录中创建一个 bower.json 文件。

在根目录中创建一个名为 .bowerrc 的新文件。它应包含以下内容:

{
  "directory": "public/bower_components"
}

这让 Bower 知道它应该保存应用程序公共目录中 bower_components 文件夹中的组件。

现在添加你希望与应用程序一起使用的 Polymer 组件。

在你的应用程序的根目录中,bower-install 你要使用的每个组件。

bower install --save PolymerElements/paper-button#^1.0.0 PolymerElements/paper-checkbox#^1.0.0

Vulcanize 添加到项目中

Meteor add differential:vulcanize

在项目的根目录中创建一个名为 config.vulcanize 的新文件。它应包含以下内容:

{
    "polyfill": "/bower_components/webcomponentsjs/webcomponents.min.js",
    "useShadowDom": true, // optional, defaults to shady dom (polymer default)
    "imports": [
        "/bower_components/paper-button/paper-button.html",
        "/bower_components/paper-checkbox/paper-checkbox.html"
    ]
}

imports 应列出你将在应用中使用的每个组件。

你现在可以像使用任何其他元素一样使用在 Blaze 模板中导入的组件:

<template name="example">
    <div>
        this is a material design button: <paper-button></paper-button>
        this is a material design checkbox: <paper-checkbox></paper-checkbox>
    </div>
</template>