滴滴 WebApp 團隊在去年底用 Vue.js 2.0 對業務進行重構，并開發了一套移動端組件庫 cube-ui 支撐業務的開發。經過了一年多的業務考驗，cube-ui 也日趨成熟，而且我們相信除了在滴滴內部，cube-ui 也一定也有它的用武之地。好的東西必須要和大家分享，所以我們非常開心的告訴大家， cube-ui 在今天正式開源，地址 github.com/didi/cube-u… 。

cube-ui 從滴滴業務中提煉而來，由滴滴 WebApp 前端架構組開發和維護。cube-ui 的目標是讓移動端的開發更加容易，讓開發人員更加專注于業務邏輯的開發，提升研發效率。

特性質量可靠

由滴滴內部組件庫精簡提煉而來，經歷了業務一年多的考驗，并且每個組件都有充分單元測試，為后續集成提供保障。

體驗極致

以迅速響應、動畫流暢、接近原生為目標，在交互體驗方面追求極致。

標準規范

遵循統一的設計交互標準，高度還原設計效果；接口標準化，統一規范使用方式，開發更加簡單高效。

擴展性強

支持按需引入和后編譯，輕量靈活；擴展性強，可以方便地基于現有組件實現二次開發。

優勢

相對于同類型的移動端組件庫，cube-ui 有哪些優勢？

追求極致的體驗

我常說一句話：“移動端組件庫寫的好不好，就看 Picker 組件寫的好不好”，因為想把這個組件寫好是需要花一定功夫的。cube-ui 的 Picker 是目前所有移動端組件庫中實現最細致，體驗也是最好的，接近原生 iOS 選擇器的效果。類似的還有 IndexList 索引列表組件，我們在一些交互的細節上都考慮的非常細致，比如對吸頂標題的處理，按壓態的處理等。

后編譯技術

后編譯技術是滴滴前端團隊在“一個項目中引用多個 ES6 開發的模塊，由于 Babel 編譯會產生多份額外代碼”的問題的思考并總結出的一套優化的技術方案。cube-ui 組件庫也用到了該技術方案，它會讓最終使用方引用 cube-ui 組件庫編譯產生的代碼體積減少，在一定程度上優化了性能。

組件

cube-ui 組件主要包括 3 個部分，基礎組件、彈出層組件和滾動組件。目前總共開源了 14 個組件，我們的原則是只開源通用性強的組件。雖然目前組件的個數不多，但是在組件的體驗和交互，包括易用性上我們都追求極致。

使用

cube-ui 支持 2 種使用方式，聲明式和 API 式。

show toast

data() {

return {

toastTxt: 'toast content'

}

},

methods: {

showToast() {

this.$createToast({

txt: this.toastTxt

}).show()

}

}

}復制代碼

如上代碼所示，這里面實際上使用了 2 個 cube-ui 的組件，cube-button 和 cube-toast。可以看到，cube-button 我們是用了聲明式的創建，而 cube-toast 是通過實例上的 $createToast API 調用。

Vue.js 是比較推崇聲明式的方式使用組件，但是考慮到組件嵌套較深的場景，子組件的樣式可能被父級樣式影響，所以我們針對彈出層類型的組件設計了 API 方式的調用，它們最終會掛載到 body 元素下，避免了樣式受父級影響。

擴展

cube-ui 的某些組件有著很好的擴展性，我們可以根據實際場景需求做功能的擴展，舉例說明：

Popup

彈層類組件的基類，內置所有的彈層類組件(Toast、Picker、TimePicker、Dialog、ActionSheet )等都是基于 Popup 組件實現，當然我們也可以基于它開發更豐富的彈層類組件。

Picker

移動端選擇器組件， TimePicker 就是在 Picker 基礎上封裝出來的組件，當然我們也可以基于 Picker 擴展出一個城市選擇器組件。

演示

演示地址，推薦在手機上瀏覽。

掃碼體驗：

架構設計

cube-ui 底層依賴了 Vue 和 better-scroll，并依賴了一系列工具做了構建部署、單元測試等工作；在這些基礎上，cube-ui 實現了一系列的組件，如圖所示：

enter image description here

展望

未來我們會持續對 cube-ui 迭代和優化，包括但不限于以下幾個方向：

豐富組件庫

我們會考慮根據滴滴內部的需求以及社區的反饋開發更多通用的組件。

支持換膚功能

我們會對換膚功能做很好的支持，和 UI 團隊配合設計出幾套皮膚，同時也支持自定義皮膚能力。

支持 TypeScript/Flow

靜態類型檢查作為未來的趨勢，cube-ui 也會考慮對它們的支持。

總結

以上是生活随笔為你收集整理的移动端cube界面设计html,滴滴 Web 移动端组件库 cube-ui 开源的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。