iT邦幫忙

DAY 2
1

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

雖然我們可以藉由雲端工具淺嚐Polymer開發,例如JSBinCodePen等,或是可直接拖拉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 官方 操作步驟


上一篇
Polymer 簡介
下一篇
Polymer 淺嚐元件使用
系列文
你不能不知道的Polymer開發實戰30

尚未有邦友留言

立即登入留言