Vue 高效 UI 组件库—iView 开发实践

前段时间在微软参加活动，分享了 TalkingData 开源的基于 Vue.js 的高效 UI 组件库 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 配套的工作流（https://github.com/icarusion/vue-vueRouter-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