Touch UI:基於vue的移動端UI框架

Hi,咱們作了一款高質量的、免費的移動端UI框架。前端

通過將兩年多開發和項目實踐,咱們終於把Touch UI開放出來了。這是一套基於vue.js打造的移動端UI框架,包含近百種組件,幾乎囊括了開發移動應用的全部細節。vue

Touch UI有何亮點?git

咱們認爲,一套足夠好的移動端UI框架應該知足4個要素。github

一、豐富的組件和易用的API小程序

咱們在作這套UI框架時,分析了大量的主流的移動應用,從中抽象出將近100種組件。囊括了容器佈局、切換、模態、表單、列表、文本、多媒體、圖形圖表、地圖等各個方面。微信小程序

咱們但願開發者在開發移動應用時,沒必要把精力花在處處找組件、處理兼容等事情上,而是可以專一於業務,真正實現組件拿來即用,像搭積木同樣開發移動應用。前端工程化

圖片描述

二、友好的移動交互微信

跟PC開發不一樣,移動端的UI應該具有友好的移動端交互,例如上拉下拉、手指滑屏、按下滑動等等。咱們在這些方面作了充分的考慮,每一個組件都是針對移動端精心打造,追求原生級別的操做體驗。
圖片描述前端工程師

圖片描述

圖片描述

圖片描述

三、優秀的性能框架

如何在功能豐富的基礎上還能保證高性能,是咱們作這套框架的一個很大挑戰。爲此,咱們作了大量的工做來優化性能,例如按需編譯、資源拆分加載等等。如今基本能夠達到點擊頁面秒開的效果。

四、良好的開發體驗

前端工程化的出現,大大提升了前端項目的開發效率並下降維護成本,但對於徹底沒有經驗的傳統前端工程師來講,各類的環境配置和依賴安裝仍是有不小的門檻。

基於微軟VSCode編輯器的插件機制,咱們把前端工程化所須要的作的各類構建、編譯環節所有封裝起來,給開發者提供可視化右鍵菜單,從而簡化環境配置並下降入門門檻。同時,Touch UI框架和組件也都在插件裏面,這樣當框架有升級時,開發者經過在線升級插件的方式就能夠更新Touch UI,很是方便。

圖片描述

One More Thing

咱們同時還推出了一套微信小程序UI框架:TouchUI-WX,它增長了30多種經常使用的組件用於官方組件的補充,而且擴充了很多功能,例如支持阿里的iconfont矢量圖標庫,支持less語法等。

圖片描述

最重要的是,你能夠將Touch UI工程與TouchUI-WX工程相互進行轉換。實現開發一套代碼,發佈H5和微信小程序兩種應用。

官網:https://www.touchui.io

Github:https://github.com/uileader/t...

相關文章
相關標籤/搜索