资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Vue高效UI组件库—iView开发实践

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

wean / 2662人阅读

摘要：它的文档也是相当详细，每个功能都配有详细说明和实例代码，直接复制就可以使用，我们也计划在明年启动英文文档翻译计划。明年会启动英文文档翻译计划，也希望喜欢和支持，同时英语不错的同学可以加入我们，一起参与翻译。

前段时间在微软参加活动，分享了 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 来模拟出这样一个组件，那使用方法就像是 something。对的，这就是 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

与浏览器原生