前段時間在微軟參加活動，分享了 TalkingData 開源的基於 Vue.js 的高效 UI 元件庫 iView 的一些開發經驗，現整理成文，和大家探討。
本文首發於掘金，轉載請註明出處和作者。
GitHub：https://github.com/iview/iview
關於 iView
開發歷程和命名
TalkingData 視覺化團隊使用 Vue 有半年多時間，經歷了從開始簡單的使用雙向繫結，到後來完全依賴 Vue 全家桶和 Webpack 的演變過程。這套開發模式驗證了多個大中型專案，開發效率有了顯著了提升，工作流也從半自動進化到了開發、灰度、生成環境的全自動，可以說 Vue 還是給我們帶來了很愉快的開發體驗。
隨著元件化的不斷深入，對元件的複用和維護成了一個問題，於是開始調研市面上的 UI 元件庫，發現基於 Vue 的大多是移動端的，而針對 PC 中後臺的，能像阿里 Ant.Design(基於React.js) 那樣功能豐富而且高質量的，沒有看中一款，要麼就是不維護了，要麼就是功能太簡單，質量不夠高。所以我們決定自己開發維護一套高質量的 UI 元件庫。確定好這個目標，規劃好1.x版本後，就開始這條不歸路，最近三個多月一直投身於 iView 的開發。
至於起 iView 這個名字，其實也沒多想，以 Apple 的產品命名加上 Vue 的發音，簡單好記好讀，同時 GitHub 還沒有註冊這個組織名（就為了這些，也得把它做成一個精品?）。
使用場景
iView 主要適合大中型中後臺產品，比如某產品的運營平臺、資料監控平臺、管理平臺等，從工程配置、到樣式佈局，甚至後面規劃的業務套件，是一整套的解決方案，所以它可能不太適合一些 to C 的產品，比如 QQ空間 這類的。
面向的開發者
iView 當然主要的物件導向是有過 Vue 元件化開發經驗的前端工程師了，但同時對偏後端的工程師也很友好，因為我們提供好了環境配置和豐富的文件教程，即使對於像寫 Java 從未接觸過 Vue 開發的同學，在一週內也能很快上手，而且基於這套解決方案開發的產品是非常高效的SPA。
版本及相容
目前 iView 可以直接通過 npm 安裝，很快將釋出一個重要版本 0.9.7，在這個版本中，我們對大部分元件的 UI 進行了調整和優化，也豐富了很多元件的功能。
由於 Vue 本身原因(這裡不展開)，iView 只能相容到 IE 9+，表現最好的是 Chrome、Safari、Firefox，有些功能和動畫不能在 IE 下得到相容。這也和使用場景有關，一般 to B 的產品，我們可以要求客戶去使用高階瀏覽器。
iView 特點
- 基於 npm + webpack + babel + ES2015
- 友好的 API
- 事無鉅細的文件
- 高質量、功能豐富
因為 iView 目前是在 webpack 下使用的，所以你可以使用 webpack 豐富的外掛和個性化配置。iView 也是使用了 ES2015 開發。
iView 一個最大的特點，就是我們從使用者和場景出發來設計 API，這點後面會重點講到。它的文件也是相當詳細，每個功能都配有詳細說明和例項程式碼，直接複製就可以使用，我們也計劃在明年啟動英文文件翻譯計劃。
在開發元件時，我們閱讀了很多已有元件庫的程式碼，取長補短，實現程式碼的高質量。
目前進度
iView 計劃在2017年初能夠釋出1.0版本，1.0將覆蓋40+常用 UI 元件，包含 Form表單類，View檢視類，Navigation導航類，Base基礎佈局類，Chart圖表類等。圖中打勾的是已經完成並上線的元件。
24柵格系統
iView 借鑑了 Bootstrap 和 Ant.Design 的柵格系統，支援每行最多容納 24 列的佈局，柵格系統對高階瀏覽器支援 Flex佈局，包括 Flex對齊、Flex排列、Flex順序，也支援柵格的排序、偏移、間隔。友好柵格系統對頁面的拆分佈局起到了關鍵作用，你可能不用再寫任何佈局程式碼就可以輕鬆使用柵格完成你的需求，而且它很精準。
精心設計的 API
我們在元件 API 的設計上下了很多功夫。很多開發者在實現一個元件時，可能從程式設計的難易出發思考問題，而忽略了這種設計是否對使用者友好，iView 則一切以使用者為核心，我們會思考這樣設計是否對使用者便利，或者如果是我用這個元件，我希望怎樣來用。舉個栗子，常見的頁面資訊提示，JavaScript 原生是window.alert('something')，但是用 Vue 來模擬出這樣一個元件，那使用方法就像是
為了更形象的介紹 iView 的 API 設計，我們拿出了一個常用的元件 Modal 模態對話方塊，和餓了麼的 Element 及 Radon UI 這兩個元件庫進行對比。一般的 Modal 長這樣：
有標題欄(header)、關閉按鈕、正文(body)、底部(footer)操作按鈕，點選灰色遮罩層或鍵盤 Esc 鍵可以關閉對話方塊。
從元件的呼叫方式上，Element 用的是傳統元件的使用方法，也就是通過一個自定義 HTML 標籤，Radon UI 是例項的方法，iView 同時支援元件和例項兩種方法（這裡解釋一下，Element 也有支援例項呼叫對話方塊的元件，是另一個 Dialog，不過目前是分成兩個元件使用的）。
自定義 slot 讓元件複用性成為了可能。Element 支援body、footer的 slot，Radon UI 只支援body，iView 是支援 header、footer、body（其實還有關閉按鈕也支援）的slot，幾乎滿足了所有 Modal 自定義需求。
有時候我們點選確定按鈕，不一樣要立即關閉對話方塊，而是非同步的獲取資料，在某個時刻關閉。Element 需要自己實現這個功能，Radon UI 則不支援，iView 是原生支援，只需要一個屬性配置即可。
在更多的自定義配置上，iView 也是最大化的進行支援（詳細API可查閱文件）。
事無鉅細的文件
iView 在文件編寫上也是做到了事無鉅細（由於文件用了一套相對重的方案來實現例項和程式碼的友好分離，故目前沒有將文件開源，我們會在明年實現一個更好地提交文件bug及翻譯的方案），每個元件的每個功能都有非常詳細的說明，包括像哪些引數需要.sync使用，一些隱藏的功能、可能遇到的坑等等，同時每個 demo 都有完整的程式碼示例，一鍵複製，貼上後就可以直接看到效果。
API 也按照 props、events、slot 三部分拆分，避免混合說明遺漏和閱讀不便利。
iView 的文件是目前所有同類文件裡最為詳細的，也受到了很多開發者的好評，所以我們仍會在文件開發的工作上保持高產出。
高質量，功能豐富
其實前文已經從各方面介紹了 iView 的高質量和豐富的功能，所以就舉兩個例子吧。
分頁元件 Page：
分頁元件從功能上借鑑了 Ant.Design，支援智慧摺疊頁碼（頁碼過多時，會左右摺疊）、頁碼快進（點選···會快進或快退5頁）、切換每頁顯示條數、電梯，同時還有迷你模式（支援所以普通模式的功能）和簡介模式。
選擇器元件 Select
與瀏覽器原生不同的是，首先 UI 統一而且很好看，這是大部分模擬 select 的主要原因，其次功能更加強大，支援單選、多選，鍵盤的快捷操作，還支援搜尋、自定義模板、分組，以及大中小三種尺寸（iView 很多表單類元件都提供了不同的尺寸），在單選時還可以清空選項。
配套工程
最後要說的是與 iView 配套的工作流（github.com/icarusion/v…），好馬配好鞍，這套工作流支撐了 TalkingData 很多大型產品，從開發、灰度到上線都可以一鍵式完成，包括資源的 CDN 配置等等，不管你是新手還是老司機，都可以從它開始開發。當然 iView 也是支援 vue-cli 的。
Todo
- iView 目前是基於 Vue.js 1.0的，我們會在將來新開一個分支來支援 Vue 2.0，我們也認為 2.0 是未來的趨勢。
- iView 很快會支援不依賴 webpack 的 umd 使用方法。
- 目前的 UI 是以 Ant.Design 為雛形，我們在 0.9.7 版本開始逐步優化和替代，使 iView 不僅好用，還很好看。
- iView 明年會啟動英文文件翻譯計劃，也希望喜歡和支援 iView ，同時英語不錯的同學可以加入我們，一起參與翻譯。
後記
iView 從正式釋出1個月內，獲得了很多好評，連續5天進入 GitHub Trending（當然，這離不開掘金強大的運營能力?），在很多社群反響不錯，我們也會繼續努力，把最好的 iView 元件庫呈現給大家。我們也非常期望喜歡 iView 的開發者能夠加入我們，一起貢獻程式碼或是翻譯文件，我們歡迎各種形式的程式碼貢獻。如果您有想法加入翻譯計劃，可以郵件聯絡我：admin@aresn.com