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

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

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

图片预览

全局组件

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

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

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

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

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

radon-ui.png

兼容性

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

最后的地址

• 文档地址

• 源码