网站首页 > 工作总结> 文章内容

Vuejs 组件库 Rubik UI 开发总结

※发布时间:2017-10-28 20:19:42   ※发布作者:habao   ※出自何处: 

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

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

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

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

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

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

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

  直接在最外层使用 v-model 指令就可实现对 input 标签的双向数据绑定。

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

  推荐:

  

相关阅读
  • 没有资料