先定个小目标: 比方说写一个Vue组件库-Radon-UI

3,428 阅读4分钟

Radon -- 孩子的姓名很重要

对于如今竞争如此激烈的前端界来说,出一个组件库,最重要的事情就是起个吊炸天的名字,什么狗蛋啊,狗剩啊,虽然好生养,但是容易被鄙视,我们这个组件库的名字叫Radon(百度百科, Wiki)。

它是一个惰性元素,但它是惰性元素里面最活跃的一个,正好符合我们的设定,大家为什么使用组件库,或者说为什么用别人的组件库,因为懒,那为什么我们团队来写这个组件库呢?因为我们是懒人里面最勤快(自诩的)的一个,天然匹配,完美!!!同时,Radon具有放射性,能够散发射线,我们也想用自己的能量,小小的影响下前端的Vuers。

点子从何而来

点子是因为我们要做一个自己的后台管理系统,但是系统的设计并没有,只有原型,所以我们要使用别人的组件或者成熟的Css框架来搭建,紧接着是服务端的接口并没有准备好,哦,不对,应该是还没有排上日期写,那么契机在这里产生了,也就是说我们还有一段时间可以准备,于是我们产生了这个想法,定了个小目标,先写组件,后用组件来拼装我们的系统。这一段关键的时间,就这样产生了,正好 Vue插件小王子Awe刚来我们公司,他身上没有任何项目包袱,也不存在历史包袱,可以全心全意搞这个组件库,一拍即可,这个库就这么走上了历史的轨迹。

为什么要自己写

  • 长期以后,我们受惠于开源世界,各种插件,组件,各种框架,不计其数的开发人员,帮助我们写代码。现在是时候反馈社区的人,所以我们一直有这么一个念头,写一个开源的东西来回报大家,在这之前,我本人有过几个小的开源插件,但这次是我们团队的产品。

  • 选择使用Vue来写一个UI的组件库,除了我们目前的技术栈是选择的Vue,还有刚好契合前面我提到的时机,最重要的是目前我们没有发现更好的Vue的组件库,所以我们自己需要,大家也应该是需要,这是一个刚需(不管你们信不信,反正我们信了。)

  • 最重要的我们有人员,有能力,也有这个信心出产一个好的组件库来给大家使用。(不要打我!!!)

Radon--为何牛逼

基本特点

  • 基于 Vue 开发的高质量UI组件
  • 基于 npm + webpack + ES6 + postcss开发
  • 数据驱动,简单易使用
  • 已经使用在我们自己一些后台管理系统的项目中,亲自验收过了
  • 我们没有KPI,这不是KPI开源项目
  • 2种使用方式,一种可以用我们的源码,在vue的项目中新建目录,引用,一种可以使用npm的方式,直接引用,随你喜欢。

微创新

图片预览( preivew )

在 Radon UI 中点击图片或者其他任何元素都可以实现打开高清图片的预览。 使用中只需要在根节点中放置 <rd-preview></rd-preview>,之后就可以在任何元素上使用 v-preview 指令来注册相应的高清预览图片。 比如:

这样就完成了图片的预览。大概这个样子

图片预览

全局组件

全局组件是一类比较特殊的组件,如 Modal,Notification 他们只需要放置在适当位置,在需要的时候弹出或者请求交互即可,不需要重复的注册、调用、销毁,所以我们的解决方案是将这一类组件放置在根实例中,直接使用父组件的响应式数据对象,这样任何子组件都可以在业务代码中通过我们定义的 Vue 的实例方法来调用它们,比如:

通过这一行代码,我们就实现了发送了一个消息为“编辑成功”的成功状态,并在3s后自动消失的通知。

 this.$Notification.success('编辑成功', '', 3000)

这里通过简单地调用 $Modal.create 就可以弹出确认框来请求用户交互,用户交互就会相应执行其中的回调函数。

this.$Modal.create('这里是标题','这里应该说点什么',() => {
  console.log('confirm')
},
() => {
  console.log('cancel')
})

全局组件在这里

兼容性

兼容PC和Mobile, 2边都可以用, 统一了公司的UI风格,这样爽不爽。

最后的地址