使用差異硫化

在專案的根目錄中,確保安裝了 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>