先定個小目標： 比方說寫一個Vue組件庫-Radon-UI
Radon -- 孩子的姓名很重要
對於如今競爭如此激烈的前端界來說，出一個組件庫，最重要的事情就是起個吊炸天的名字，什麼狗蛋啊，狗剩啊，雖然好生養，但是容易被鄙視，我們這個組件庫的名字叫Radon（[百度百科](氡_百度百科), [Wiki](Radon)）,。
它是一個惰性元素，但它是惰性元素裡面最活躍的一個。，正好符合我們的設定，大家為什麼使用組件庫，或者說為什麼用別人的組件庫，因為懶，那為什麼我們團隊來寫這個組件庫呢？因為我們是懶人裡面最勤快（自詡的）的一個，天然匹配，完美！！！同時，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` 指令來註冊相應的高清預覽圖片。
比如：
<img v-for="img in list" v-preview="img.full" :src="img.small">n
這樣就完成了圖片的預覽。大概這個樣子
全局組件
全局組件是一類比較特殊的組件，如 Modal，Notification 他們只需要放置在適當位置，在需要的時候彈出或者請求交互即可，不需要重複的註冊、調用、銷毀，所以我們的解決方案是將這一類組件放置在根實例中，直接使用父組件的響應式數據對象，這樣任何子組件都可以在業務代碼中通過我們定義的 Vue 的實例方法來調用它們，比如：
通過這一行代碼，我們就實現了發送了一個消息為「編輯成功」的成功狀態，並在3s後自動消失的通知。
this.$Notification.success(編輯成功, , 3000)n
這裡通過簡單地調用 `$Modal.create` 就可以彈出確認框來請求用戶交互，用戶交互就會相應執行其中的回調函數。
this.$Modal.create(這裡是標題,這裡應該說點什麼,() => {n console.log(confirm)n},n() => {n console.log(cancel)n})n
兼容性
兼容PC和Mobile， 2邊都可以用， 統一了公司的UI風格，這樣爽不爽。
最後的地址
* [文檔地址](radon-ui)
* [源碼](GitHub - luojilab/radon-ui: 一個用於快速開發產品的簡潔、優雅、高效的 Vue 組件庫)
推薦閱讀：