未加星标

51.Vue.js 组件库 Rubik UI 开发心得总结

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
Vue.js 组件库 Rubik UI 开发心得总结

Rubik UI 是一套基于 Vue 2.0 和 Material Design 开发的桌面端、移动端组件库

开发目的

因为公司内部系统开发的越来越多,而却同事们的要求也越来越高,不仅要好用而且要好看,看惯了 Bootstrap 自然会产生视觉疲劳,因此设计师同学的需求越来越多、后台系统各种体验不统一,因此就自发决定:

开发一套组件库,首先提升后台的可用性和用户体验 设计师 "轻" 参与,选定 Material Design 作为视觉的规范 尽可能保证组件库也能用于前台和移动端 设计、思考阶段

因为亲自从零参与并开发了几个后台,发现之前开发的各个业务组件的共性太低,不同后台业务需求差距也比较大,即使开发了通用的业务级组件,后续也跟不上需求的变化速度,因此只专注基础组件,同时也有利于保证组件库的 "轻量级" 特性和后续用于前台移动端的项目。

开发过程 确认视觉规范

这一步设计师来主导,制定基础的颜色、字体等规范。

因为决定参照 Material Design 的设计来开发,因此这一步进展的很快很顺利

其中这时候也确认了 LOGO 的设计:一个扁平化的魔方

确认基础组件

这是每一个组件库都会做的,我主要参考了 Bootstap 和 materializecss 的组件库,并结合业务中抽象出来的基础组件,最终确认了初期的组件开发任务。

确认技术栈

只支持 Vue.js 2.0+

webpack + ES2015 + stylus 做 js 和 css 构建

Karma + mocha 做单元测试

组件示例

直接在项目目录下新建一个 example 目录,并结合 Vue-Router 开发成一个单页应用,每个单独 view 作为一个组件的 demo,目录如下:


51.Vue.js 组件库 Rubik UI 开发心得总结
51.Vue.js 组件库 Rubik UI 开发心得总结

这样就可以在 push master 分支的同时在 GitHub Pages 上作为官网展示了

文档

为了让用户看起来直观,所以文档中就必须存在各种示例,但是用 Markdown 写就无法添加实例。因此只能每个文档都暂时单独当做一个网页来处理。后续的计划是写一个 Markdown 转 .vue 文件的 loader ,用 webpack 来处理。

遇到的问题 自定义组件的原生事件

在 Vue 2.0 中的组定义组件上使用 v-on 就能直接监听自定义事件。

如果要监听原生事件就必须使用修饰符 .native

Vue 组件库 Element 的 Button 组件支持两种事件监听方式

<el-button @click.native="handleClick">Click Me!</el-button> <el-button @click="handleClick">Click Me!</el-button>

我根据尽量保持轻量和不打扰用户的原则,权衡之后决定只让用户自己决定事件的监听:

<r-btn info @click.native="handleClick">Button Click</r-btn>

而且任何自定义的组件都可以用 @click.native="handleClick" 的方式给跟组件添加事件监听

事件机制 Event Bus

组件库中的组件之间肯定会有关联,而且父子组件之间也会通信,所以需要一套事件机制(简单的 pub/sub )来把所有的组件糅合在一起。

因为事件库起到了桥梁的作用,所以我起名叫 util/bridge.js ,其实叫 bus.js 或者 events.js 可能会更清晰点。

把 bridge 挂载到 Vue.prototype.$rubik 上,就很容易的通过 this.$rubik.bridge 在每个组件中进行事件的传递了。

bridge.js 如下:

import EventEmitter from 'events' class Bridge extends EventEmitter { constructor () { super() this.setMaxListeners(500) } sub (event, cb) { const type = typeof event if (type !== 'object' && type !== 'array') { return this.on(event, cb) } event.forEach(i => this.on.apply(this, i)) } unsub (event, cb) { const type = typeof event if (type !== 'object' && type !== 'array') { return this.removeListener(event, cb) } event.forEach(i => this.removeListener.apply(this, i)) } pub () { this.emit.apply(this, arguments) } } export default new Bridge()

当组件被销毁时,注册事件也要执行 unsub ,因为有了 Vue 生命周期的 Hook ,所以很简单,只需要写一个 mixin: mixins/event.js

export default { mounted () { this.$rubik.bridge.sub(this.events) }, beforeDestroy () { this.$rubik.bridge.unsub(this.events) } } onload

因为有时候需要等待 DOM 加载成功后才去执行一些操作,所以在 Vue 的 prototype.$rubik 上添加了 load 方法,方便在各个组件中直接调用:

mounted(){ this.$rubik.load(this.init) }, methods: { init(){ alert('Component ready!') } }

load.js 也很简单

export default function (cb) { if (document.readyState === 'complete') { return setTimeout(cb, 0) } document.addEventListener('DOMContentLoaded', cb) } 栅格样式

因为采用12栅格,所以模仿了 Bootstrap 生成栅格的sass写法,改成 stylus 的函数

for size, width in $grid-breakpoints &.{size} flex-grow 1 flex-shrink 1 @media only screen and (min-width: width) for n in (1..$grid-columns) &.{size}{n} flex-basis (n / $grid-columns * 100)% max-width (n / $grid-columns * 100)% &.offset-{size}{n} margin-left (n / $grid-columns * 100)%

根据变量 $grid-breakpoints

$grid-breakpoints := { xs: 0 sm: 576px md: 768px lg: 992px }

只需要17行代码生成四种响应式380行左右的css样式代码

总结

因为一直都是一个人在开发,所以遇到了很多问题都是在社区中寻找到的答案,其中也踩了不少坑,但这也都是自己成长中不可多得的经验,虽然是个个人项目,但还是希望能不断的完善,无论有没有用户在用,至少都是自己的产品,慢慢打磨。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:51.Vue.js 组件库 Rubik UI 开发心得总结
本站链接:http://www.codesec.net/view/533136.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(108)