今日目標: 完成本機Polymer安裝

雖然我們可以藉由雲端工具淺嚐Polymer開發，例如JSBin、CodePen等，或是可直接拖拉Polymer元件的EZoApp，但要深入把玩還是備好本機開發環境才是王道。

編輯器挑自己順手就好，我覺得 Sublime 挺好的，不過建構可運行Polymer的環境，最好還是裝好下列工具才能事半功倍

環境必備工具

git + github
git應該都聽過，沒用過趕快google一下，這已經是開發者必備的版本管控利器，再加上github簡直就是...與開發者世界接軌了

NodeJS
NodeJS用途很多，在這裏只是拿來當WebServer 和Polymer安裝套件的基礎環境

Bower
Polymer官網本身就推薦使用Bower來管理前端各套件版本與相依性，而且網路上很多WebComponents都將Bower列為安裝元件的標配，所以裝吧

Serve (選配)
這是超迷你的WebServer，直接跑在NodeJS上面，用 $ npm install -g serve 裝好就可以直接啟動WebServer，方便測試

安裝Polymer步驟

裝好上述工具後，建立一個目錄，先執行 bower init 進行初始化設定，經過一連續按 [Enter] 用預設值後，就可以得到 bower.json。這個檔案就是用來管此目錄下的套件版本與相依性了

➜  ~  mkdir itironman
➜  ~  cd itironman
➜  itironman  bower init
    ...
    [?] Looks good? Yes
➜  itironman  ls
bower.json

接下來，有bower的幫忙，一行指令就可以完成Polymer安裝

➜  itironman  bower install --save Polymer/polymer
... 省略安裝過程訊息
core-component-page#0.4.0 bower_components/core-component-page
├── platform#0.4.0
└── polymer#0.4.0

➜  itironman  ls
bower.json       bower_components

裝完後，會多一個bower_components目錄，polymer相關套件會自動放進去。未來安裝與使用的WebComponent 也都會放在這目錄下，讓bower幫忙更新與管理

➜  itironman  cd bower_components
➜  bower_components  ls
core-component-page platform            polymer

polymer裝好後，接下來我們可以安裝想要玩的Web Components 。Polymer本身有提供兩組元件，Polymer核心元件 Polymer/core-elements ，以及今年Google I/O推出的Marterial Design元件 Polymer/paper-elements

要安裝的話，就像剛剛裝Polymer一樣，交給Bower一行指令就搞定了

➜  itironman  bower install --save Polymer/core-elements
➜  itironman  bower install --save Polymer/paper-elements

所以剛剛用bower 裝三次，分別是 polymer本身套件、polymer核心元件、Material Design元件。

bower本身可以管理套件間的相依性，Material Design元件本身就會依賴的polymer核心元件，polymer核心元件當然一定要 polymer才能跑，所以其實只要安裝 Polymer/paper-elements 就會自動裝好全部套件了 :>

➜  itironman  bower install --save Polymer/paper-elements

這時候再到bower_components目錄看一下，就會發現可以使用的元件好多啊 (基本上一個目錄就是一個元件)

怎麼用，就讓我們繼續看下去...

延伸閱讀

初學git，不可錯過 Will保哥的30天精通Git版本管控

安裝Polymer 官方 操作步驟