vue可以用的框架:1、Ant Design Vue,是一個(gè)非常成熟的框架,使用它創(chuàng)建用戶界面非常簡單;2、BalmUI,是一款交互體驗(yàn)非常優(yōu)秀的UI組件庫;3、Wave UI,是一個(gè)響應(yīng)式,可訪問且易于觸摸的UI組件框架;4、Vuestic,提供了50多個(gè)具有獨(dú)特功能和廣泛可配置性的組件;5、Element,是一個(gè)桌面端組件庫;6、Quasar,是一個(gè)以性能為中心的框架。
本教程操作環(huán)境:windows7系統(tǒng)、vue3版,DELL G3電腦。
Vue 是一個(gè)輕巧、高性能、可組件化的MVVM庫,API簡潔明了,上手快。從Vue推出以來,得到眾多Web開發(fā)者的認(rèn)可。
在公司的Web前端項(xiàng)目開發(fā)中,多個(gè)項(xiàng)目采用基于Vue的UI組件框架開發(fā),并投入正式使用。
開發(fā)團(tuán)隊(duì)在使用Vue.js框架和UI組件庫以后,開發(fā)效率大大提高,自己寫的代碼也少了,很多界面效果組件已經(jīng)封裝好了。
在選擇Vue UI組件庫的過程中,通過GitHub上根據(jù)star數(shù)量、文檔豐富程度、更新的頻率以及維護(hù)等因素,也收集整理了一些優(yōu)秀的Vue UI組件庫。
vue可以用的框架
1、 iView
iView 是一套基于 Vue.js 的開源 UI 組件庫,主要服務(wù)于 PC 界面的中后臺產(chǎn)品。iView的組件還是比較齊全的,更新也很快,文檔寫得很詳細(xì)。有公司團(tuán)隊(duì)維護(hù),比較可靠的Vue UI組件框架。iView生態(tài)也做得很好,還有開源了一個(gè)iView Admin,做后臺非常方便。官網(wǎng)上介紹,iView已經(jīng)應(yīng)用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團(tuán)、新浪、聯(lián)想等大型公司的產(chǎn)品中。
iView官網(wǎng):https://www.iviewui.com/
2、Vux
Vux是基于WeUI和Vue2.x開發(fā)的移動端UI組件庫,主要服務(wù)于微信頁面。Vux的定位已經(jīng)很明確了,一是:Vue移動端UI組件庫,二是:WeUI的基礎(chǔ)樣式庫。Vux的組件涵蓋了所有的WeUI的內(nèi)容,還擴(kuò)展了一些常用的組件。比如:Sticky、timeline、v-chart、XCircle。Vux是個(gè)人維護(hù)的。但是GitHub上star還是很高的,達(dá)到13k。在GitHub上看到對issue的關(guān)閉還是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。在vux官網(wǎng)上也展示了很多Vux的使用案例。在微信頁面開發(fā)中,基本沒有太多的bug,開發(fā)還是比較順手的。
Vux官網(wǎng):https://vux.li/
3、Element
Element,一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。Element是餓了么前端開源維護(hù)的Vue UI組件庫,更新頻率還是很高的,基本一周到半個(gè)月都會發(fā)布一個(gè)新版本。組件齊全,基本涵蓋后臺所需的所有組件,文檔講解詳細(xì),例子也很豐富。沒有實(shí)際使用過,網(wǎng)上的Element教程和文章比較多。Element應(yīng)該是一個(gè)質(zhì)量比較高的Vue UI組件庫。
Element官網(wǎng):http://element.eleme.io/#/zh-CN
Element+ 已經(jīng)在 Vue2 中聲名鵲起,Element+ 為 Vue3 帶來了大量不引人注目的組件,創(chuàng)建一個(gè)非常復(fù)雜的應(yīng)用程序所需的大部分內(nèi)容都已經(jīng)制作完成并可供使用。Element+ 提供成熟的日期和時(shí)間選擇器、樹、時(shí)間線和日歷組件。
Element+ 甚至提供開發(fā)人員在構(gòu)建 UI 界面時(shí)可能需要的最細(xì)微的部件,從簡單的動畫到框架范圍的國際化系統(tǒng),可以與 i18n 配對使用以創(chuàng)建自定義翻譯,甚至添加非內(nèi)置語言。
Element+ 在 GitHub 上擁有 11.1k+ 顆星,正在成為 Github 上最受歡迎的 Vue3 UI 框架之一,它以出色的問題管理、及時(shí)更新、可插入組件和通過SCSS變量的高定制性達(dá)到了開發(fā)者的期望。
4、Mint
Mint UI基于 Vue.js 的移動端組件庫,同樣出自餓了么前端的項(xiàng)目。Mint UI是真正意義上的按需加載組件??梢灾患虞d聲明過的組件及其樣式文件。Mint UI 采用 CSS3 處理各種動效,避免瀏覽器進(jìn)行不必要的重繪和重排,從而使用戶獲得流暢順滑的體驗(yàn)。網(wǎng)上的視頻教程很多都是基于Mint UI來講的,開發(fā)移動端web項(xiàng)目還是很方便,文檔也很簡介明了。很多頁面Mint UI組件都已經(jīng)封裝好,基本可以照著例子寫,簡單的調(diào)整一下就可以實(shí)現(xiàn)。不過,在GitHub上看最后一次代碼提交在2018年1月16日。不知道是項(xiàng)目比較穩(wěn)定沒有更新,還是項(xiàng)目有被廢棄的可能。
Mint UI官網(wǎng):http://mint-ui.github.io/#!/zh-cn
5、Bootstrap-Vue
Bootstrap-VUE提供了基于vue2的Bootstrap V4組件和網(wǎng)格系統(tǒng)的實(shí)現(xiàn),完成了廣泛和自動化的WAI ARA可訪問性標(biāo)記。Bootstrap 4是最新發(fā)布的版本,與 Bootstrap3 相比擁有了