使用差異硫化
在專案的根目錄中,確保安裝了 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>