Vue高效UI組件庫—iView開發實踐

前段時間在微軟參加活動，分享了 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 來模擬出這樣一個組件，那使用方法就像是 <Alert v-if="show">something</Alert>。對的，這就是 Vue 組件的實現方法，但是，我們真的期望這樣使用嗎，當然不是，我們也想像原生一樣，在某個時刻，一句話就能彈出來，而不用事先埋在 HTML 里，用一個 if 條件判斷是否顯示這個組件。

為了更形象的介紹 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

與瀏覽器原生<select>不同的是，首先 UI 統一而且很好看，這是大部分模擬 select 的主要原因，其次功能更加強大，支持單選、多選，鍵盤的快捷操作，還支持搜索、自定義模板、分組，以及大中小三種尺寸（iView 很多表單類組件都提供了不同的尺寸），在單選時還可以清空選項。

配套工程

最後要說的是與 iView 配套的工作流（GitHub - icarusion/vue-vueRouter-webpack: A base vue project with webpack），好馬配好鞍，這套工作流支撐了 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

推薦閱讀：