V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Aresn
V2EX  ›  JavaScript

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

  •  1
     
  •   Aresn · 2016-11-07 11:50:18 +08:00 · 19398 次点击
    这是一个创建于 2917 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前段时间在微软参加活动,分享了 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 配套的工作流(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 的开发者能够加入我们,一起贡献代码或是翻译文档,我们欢迎各种形式的代码贡献。如果您有想法加入翻译计划,可以邮件联系我: [email protected]

    22 条回复    2016-11-08 21:12:44 +08:00
    devrsi0n
        1
    devrsi0n  
       2016-11-07 12:05:06 +08:00 via Android
    Vue 高质量 ui 库确实不多,支持下
    Mbin
        2
    Mbin  
       2016-11-07 12:24:12 +08:00
    好东西
    keikeizhang
        3
    keikeizhang  
       2016-11-07 13:13:03 +08:00
    感觉很不错的样子,马克
    JoshOY
        4
    JoshOY  
       2016-11-07 13:15:44 +08:00
    感觉完全就是 Ant Design 的 Vue.js 重制版嘛…
    Kisesy
        5
    Kisesy  
       2016-11-07 13:24:17 +08:00
    之前想用的,后来发现没表格...
    xylitolLin
        6
    xylitolLin  
       2016-11-07 13:25:11 +08:00
    @JoshOY 我之前也说过类似的评论,被人喷了一脸
    keikeizhang
        7
    keikeizhang  
       2016-11-07 13:26:53 +08:00
    http://element.eleme.io/#/ 我感觉这个基于你们的 UI 写的东东比较符合我们的项目需求,再次感谢
    Loerise
        8
    Loerise  
       2016-11-07 13:28:38 +08:00
    东西很好,如果能像 element 一样提供 Axure Components 和 Sketch Template 甚至 PS 可用的就更好了。
    JoshOY
        9
    JoshOY  
       2016-11-07 13:29:09 +08:00
    @xylitolLin 但是这个库至少完成度还可以,之前也见到过一个 vue-antd 已经基本不维护了
    exoticknight
        10
    exoticknight  
       2016-11-07 13:30:02 +08:00
    好东西,解决痛点
    ucaime
        11
    ucaime  
       2016-11-07 13:34:25 +08:00
    Ant Design 在 react 之前有过一版 vue 的吧,这个显示效果几乎和 Ant 一模一样
    Aresn
        12
    Aresn  
    OP
       2016-11-07 13:53:52 +08:00
    从 0.9.7 开始, UI 和功能都会逐步迭代完善
    Troevil
        13
    Troevil  
       2016-11-07 13:55:21 +08:00
    ele 那个 vue 的库挺不错的
    fhefh
        14
    fhefh  
       2016-11-07 14:08:40 +08:00
    先 mark 3Q
    lwbjing
        15
    lwbjing  
       2016-11-07 14:37:37 +08:00
    那年,想把 ant design 移到 vue 上来在公司里用,然后因为太懒了就没有然后了...
    DeepCold
        16
    DeepCold  
       2016-11-07 16:46:47 +08:00
    支持,持续关注着
    peneazy
        17
    peneazy  
       2016-11-07 19:28:44 +08:00 via Android
    mark
    wensonsmith
        18
    wensonsmith  
       2016-11-07 19:51:26 +08:00
    为什么支持 flex 布局,但是没有自动栅格呢?

    这个很有用
    smallpath
        19
    smallpath  
       2016-11-07 20:01:21 +08:00 via Android
    vue2 版权重应该高一些, vue1 组件库升 vue2 的话,改双向绑定都是个巨大的工作量
    zhenizhui
        20
    zhenizhui  
       2016-11-07 21:31:19 +08:00
    赞一个
    bobsam
        21
    bobsam  
       2016-11-07 23:40:06 +08:00 via iPhone
    @Kisesy 同感……我用了 radon-ui ,感觉还不错,但还是没有表格
    ahjdzx
        22
    ahjdzx  
       2016-11-08 21:12:44 +08:00 via iPhone
    饿了么的 http://element.eleme.io 还是不错的,@sofish
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2480 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:42 · PVG 23:42 · LAX 08:42 · JFK 11:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.