守望先鋒 UI 庫

緣起

去年 12 月玩守望等匹配的時候就無聊萌生出作一套守望 UI 的想法，由於以爲守望的 UI 比較簡潔，並且對於那些小組件的實現都有個大概的思路。當時 Hey UI 的做者也在知乎上宣傳本身的 UI 庫，因此更加堅決了作這個 UI 庫的想法。

調研了以後還真發現已經有人用 React 寫了 4 個守望的組件了。

他是用 React.js 寫的，不過他寫不是很全，沒有造成一個庫。既然沒有同類型的產品，那就我來用 Vue.js 搞一個吧。因此今年寫完代碼高亮插件後，在一些契機下開始動工。

文檔

整個庫所使用到的有 Vue.js + Karam, Mocha, Chai，能夠從 npm 下載試試~

Overwatch UI 文檔

Overwatch UI Github

後記

其實整個 UI 庫真的有用麼？作完以後其實不見得有用 :(，單從設計上來講這個庫和網頁開發的配合不是那麼的好。

由於遊戲通常是有鮮明的背影圖的，因此它的不少組件都是有透明度的，而網頁通常以白色爲底，因此組件在網頁上有點「看不清」。並且守望的組件 UI 邏輯和網頁也不太同樣，爲了凸顯遊戲自己它的組件作得很「淺」，再用到網頁上就很差看了，可是若是加背景圖應該會好點。

雖然沒啥用吧，可是收穫仍是很大的，不只熟悉了市面上 UI 庫的不少 API，也對本身的 Vue.js 有個提高，還有接觸到了之前從沒有用過的單元測試，固然也被 Vue-cli-3, Karam 等配置坑過幾遍。

總之，3 個月的製做過程也是頗有趣的，這個庫的開發算是告一段落了，該期末考了。