先定個小目標： 比方說寫一個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 中點擊圖片或者其餘任何元素均可以實現打開高清圖片的預覽。 使用中只須要在根節點中放置 <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風格，這樣爽不爽。

最後的地址

• 文檔地址

• 源碼