Polymer - 安裝

在您的系統中配置 Polymer 非常簡單。以下是安裝 Polymer 的兩種方法。

Polymer CLI（命令列介面）
Bower

使用 Polymer CLI 安裝 Polymer

步驟 1 - 使用以下 npm 命令安裝 Polymer。

npm install -g polymer-cli@next

步驟 2 - 使用以下命令檢查安裝是否成功以及版本。

polymer --version

如果安裝成功，則會顯示版本為：

步驟 3 - 建立一個您選擇的名稱的目錄，並切換到該目錄。

mkdir polymer-js 
cd polymer-js

步驟 4 - 要初始化您的專案，請在您的 polymer-jsdirectory 中執行以下命令。

polymer init

執行上述命令後，將顯示類似以下內容：

C:\polymer-js>polymer init 
? Which starter template would you like to use? 
   1) polymer-1-element - A simple Polymer 1.0 element template 
   2) polymer-2-element - A simple Polymer 2.0 element template 
   3) polymer-1-application - A simple Polymer 1.0 application template 
   4) polymer-2-application - A simple Polymer 2.0 application 
   5) polymer-1-starter-kit - A Polymer 1.x starter application template, with 
      navigation and "PRPL pattern" loading 
   6) polymer-2-starter-kit - A Polymer 2.x starter application template, with 
      navigation and "PRPL pattern" loading 
   7) shop - The "Shop" Progressive Web App demo
   Answer: 4

步驟 5 - 從上面給出的選項中選擇 polymer-2-application。

現在，使用以下命令啟動您的專案。

polymer serve

使用 Bower 安裝 Polymer

步驟 1 - 要使用 Bower 方法從頭開始，請使用以下命令安裝 Bower。

npm install -g bower

步驟 2 - 使用以下命令安裝 Polymer。

npm install -g polymer-cli@next

步驟 3 - 使用以下命令檢查 Polymer 的安裝是否成功以及版本。

polymer --version

如果安裝成功，則會顯示版本為：

0.18.0-pre.13.

步驟 4 - 要從 bower 安裝最新的 Polymer 2.0 RC 版本，請使用以下命令。

bower install Polymer/polymer#^2.0.0-rc.3

步驟 5 - 建立一個 index.html 檔案，並在 <head> 標記中新增以下程式碼。

<script src = "/bower_components/webcomponentsjs/webcomponentsloader.js"></script> 
// it loads the polyfills 

<link rel = "import" href = "/bower_components/polymer/polymer.html"> 
// it import Polymer

步驟 6 - 使用以下命令啟動您的專案。

polymer serve

構建以進行部署

要構建您的專案以進行部署，polymer build 命令是一種更簡單的方法，它將根據命令列標誌縮小、編譯或捆綁您的程式碼。

要建立可在所有瀏覽器上執行的通用構建，請使用以下命令。

polymer build --js-compile

上述命令將專案構建到 build/default，您可以使用以下命令啟動此目錄。

polymer serve build/default

Polymer 2.0 使用 ES6 和 HTML 自定義元素。最佳實踐是始終對完全支援 ES6 的瀏覽器使用 ES6，並將 ES5 編譯到不支援 ES6 的舊瀏覽器。下表顯示了專案的最佳策略。

策略	跨瀏覽器支援最輕鬆	對 WC v1 效能最最佳化
伺服器	任何伺服器都可以，包括靜態伺服器	需要差異化服務
已部署的程式碼	ES5 轉譯	ES6
Polyfill 載入器	webcomponents-es5-loader.js	webcomponents-loader.js

列印頁面