您好,登錄后才能下訂單哦!
本篇內容介紹了“vuejs移動端用哪個ui框架”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!
vuejs移動端可用的ui框架:1、iView;2、Vux;3、Element;4、Mint UI;5、Bootstrap-VUE;6、Ant Design Vue;7、AT-UI;8、Vant;9、cube-ui;10、Muse-UI等。
本教程操作環境:windows7系統、vue2.9.6版,DELL G3電腦。
Vue 是一個輕巧、高性能、可組件化的MVVM庫,API簡潔明了,上手快。從Vue推出以來,得到眾多Web開發者的認可。在公司的Web前端項目開發中,多個項目采用基于Vue的UI組件框架開發,并投入正式使用。開發團隊在使用Vue.js框架和UI組件庫以后,開發效率大大提高,自己寫的代碼也少了,很多界面效果組件已經封裝好了。
在選擇Vue UI組件庫的過程中,通過GitHub上根據star數量、文檔豐富程度、更新的頻率以及維護等因素,也收集整理了一些優秀的Vue UI組件庫。
iView 是一套基于 Vue.js 的開源 UI 組件庫,主要服務于 PC 界面的中后臺產品。iView的組件還是比較齊全的,更新也很快,文檔寫得很詳細。有公司團隊維護,比較可靠的Vue UI組件框架
。iView生態也做得很好,還有開源了一個iView Admin,做后臺非常方便。官網上介紹,iView已經應用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團、新浪、聯想等大型公司的產品中。
iView官網:https://www.iviewui.com/.
Vux是基于WeUI和Vue2.x開發的移動端UI組件庫,主要服務于微信頁面。Vux的定位已經很明確了,一是:Vue移動端UI組件庫,二是:WeUI的基礎樣式庫。Vux的組件涵蓋了所有的WeUI的內容,還擴展了一些常用的組件。比如:Sticky、timeline、v-chart、XCircle。
Vux是個人維護的。但是GitHub上star還是很高的,達到13k。在GitHub上看到對issue的關閉還是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。
在vux官網上也展示了很多Vux的使用案例。在微信頁面開發中,基本沒有太多的bug,開發還是比較順手的。
Vux官網:https://vux.li/.
Element,一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫。
Element是餓了么前端開源維護的Vue UI組件庫,更新頻率還是很高的,基本一周到半個月都會發布一個新版本。組件齊全,基本涵蓋后臺所需的所有組件,文檔講解詳細,例子也很豐富。沒有實際使用過,網上的Element教程和文章比較多。
Element應該是一個質量比較高的Vue UI組件庫。
Element官網:http://element.eleme.io/#/zh-CN.
Mint UI基于 Vue.js 的移動端組件庫,同樣出自餓了么前端的項目。Mint UI是真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件。Mint UI 采用 CSS3 處理各種動效,避免瀏覽器進行不必要的重繪和重排,從而使用戶獲得流暢順滑的體驗。
網上的視頻教程很多都是基于Mint UI來講的,開發移動端web項目還是很方便,文檔也很簡介明了。很多頁面Mint UI組件都已經封裝好,基本可以照著例子寫,簡單的調整一下就可以實現。
不過,在GitHub上看最后一次代碼提交在2018年1月16日,截止到目前已經過去半年了。不知道是項目比較穩定沒有更新,還是項目有被廢棄的可能。我們會持續關注Mint UI的動態。
Mint UI官網:http://mint-ui.github.io/.
Bootstrap-VUE提供了基于vue2的Bootstrap V4組件和網格系統的實現,完成了廣泛和自動化的WAI ARA可訪問性標記。uiv是基于Vue2的Bootstrap 3實現。Bootstrap 4是最新發布的版本,與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關的部分變成了相關的組件。同時 Bootstrap.min.css 的體積減少了40%以上。
Bootstrap4 放棄了對 IE8 以及 iOS 6 的支持,現在僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。想當初剛流行響應式網站的時候,Bootstrap是世界上最受歡迎的建立移動優先網站的框架,Bootstrap可以說風靡全球。
就算放在現在很多企業網站都是采用Bootstrap做的響應式。Bootstrap-Vue可以讓你在Vue中也實現Bootstrap的效果。
Bootstrap-Vue官網:https://bootstrap-vue.js.org/
uiv官網:https://uiv.wxsm.space/.
Ant Design Vue是 Ant Design 3.X 的 Vue 實現,開發和服務于企業級后臺產品。在GitHub上可以找到幾個Ant Design的Vue組件。不過相比較而言,Ant Design Vue更勝一籌。
Ant Design Vue共享Ant Design of React設計工具體系,實現了所有Ant Design of React的組件,支持現代瀏覽器和 IE9 及以上(需要 polyfills)。可以讓熟悉Ant Design的在使用Vue時,很容易的上手。
Ant Design Vue官網:https://vuecomponent.github.
AT-UI 是一款基于 Vue.js 2.0 的前端 UI 組件庫,主要用于快速開發 PC 網站中后臺產品,支持現代瀏覽器和 IE9 及以上。AT-UI 更加精簡,實現了后臺常用的組件。
AT_UI官網:https://at-ui.github.io/.
Vant是一個輕量、可靠的移動端 Vue 組件庫。Vant是有贊團隊開源的,主要維護也是有贊團隊。Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本,兩者基于相同的視覺規范,提供一致的 API 接口,助力開發者快速搭建小程序應用。截止到目前,Vant已經開源了50+ 個經過有贊線上業務檢驗的組件。
比如:、AddressEdit 地址編輯、AddressList 地址列表、Area 省市區選擇、Card 卡片、Contact 聯系人、Coupon 優惠券、GoodsAction 商品頁行動點、SubmitBar 提交訂單欄、Sku 商品規格彈層。如果做商城的,不太在意界面,實現業務邏輯的話,用Vant組件庫開發還是很快的。
Vant官網:https://youzan.github.io/.
cube-ui 是基于 Vue.js 實現的精致移動端組件庫。由滴滴內部組件庫精簡提煉而來,經歷了業務一年多的考驗,并且每個組件都有充分單元測試,為后續集成提供保障。在交互體驗方面追求極致。遵循統一的設計交互標準,高度還原設計效果;接口標準化,統一規范使用方式,開發更加簡單高效。支持按需引入和后編譯,輕量靈活;擴展性強,可以方便地基于現有組件實現二次開發。
cube-ui官網:https://didi.github.io/.
Muse-UI基于 Vue 2.0 優雅的 Material Design UI 組件庫。Muse UI 擁有40多個UI 組件,用于適應不同業務環境。Muse UI 僅需少量代碼即可完成主題樣式替換。Muse UI 可用于開發的復雜單頁應用
Muse-UI官網:https://muse-ui.org/#/zh-CN.
N3組件庫是基于Vue.js構建的,讓前端工程師和全棧工程師能快速構建頁面和應用。N3-components超過60個組件 組件列表、自定義樣式、支持多種模化范式(UMD)、使用ES6進行開發。
N3官網:https://n3-components.github.
Mand Mobile是面向金融場景的Vue移動端UI組件庫,豐富、靈活、實用,快速搭建優質的金融類產品,讓復雜的金融場景變簡單。Mand Mobile含有豐富的組件30+的基礎組件,覆蓋金融場景,極高的易用性組件均有詳細說明文檔、案例演示,汲取最前沿技術,組件化輕量化實現,兼顧穩定和品質,努力實現金融場景的全覆蓋。
Mand Mobile官網:https://didi.github.io/.
we-vue 是一套基于 Vue.js 的移動關組件庫,結合 weui.css 樣式庫,封裝了一系列組件,非常適于微信公眾號等移動端開發。we-vue 包含35+ 個組件,單元測試覆蓋率超 98%,支持 babel-plugin-import,完善的在線文檔,詳細的在線示例。
we-vue官網:https://wevue.org/.
veui是一個由百度EFE team開發的Vue企業級UI組件庫。目前文檔還沒有,只有demo。GitHub上說是正在進行的一項工作。那我們就耐心等待吧。
veui官網:https://ecomfe.github.io/.
Semantic-UI-Vue是基于 Vue.js對Semantic-UI 框架的實現。Semantic作為一款開發框架,幫助開發者使用對人類友好的HTML語言構建優雅的響應式布局。Semantic-UI-Vue提供了一個類似于 Semantic-UI 的 API 以及一組可定制的主題。
Semantic-UI-Vue官網:https://semantic-ui-vue.github.
vue-beauty是一套基于 vue.js 和 ant-design樣式 的PC端 UI 組件庫,旨在幫助開發者提升產品體驗和開發效率、降低維護成本。vue-beauty包含豐富的組件,涵蓋常用場景,基于vue組件化開發,數據驅動視圖,封裝復雜性,提供簡單友好的api,基于ant design樣式優化。
vue-beauty官網: https://fe-driver.github.io/.
NutUI是一套京東風格的移動端Vue組件庫,開發和服務于移動Web界面的企業級前中后臺產品。NutUI組件庫支持跨平臺,自動轉微信小程序組件(稍后上線,敬請期待),30+ 京東移動端項目正在使用,基于京東APP 7.0 視覺規范,支持按需加載,詳盡的文檔和示例,支持定制主題,支持多語言(國際化),支持 TypeScript,支持服務端渲染(Vue SSR),單元測試加持,配套有基于Webpack的構建工具,可快速創建已內置本組件庫的Vue工程。
NutUI官網: https://nutui.jd.com/#/index.
在選擇框架的時候一定要根據實際Web開發情況和團隊的熟悉程度來選擇。一個好的UI組件庫對一個Web項目來說太重要了。好的UI組件庫可以起到事半功倍的效果。
“vuejs移動端用哪個ui框架”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。