這篇文章主要介紹“vue可以用的框架有哪些”，在日常操作中，相信很多人在vue可以用的框架有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”vue可以用的框架有哪些”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

創(chuàng)新互聯(lián)公司的客戶來自各行各業(yè)，為了共同目標(biāo)，我們在工作上密切配合，從創(chuàng)業(yè)型小企業(yè)到企事業(yè)單位，感謝他們對(duì)我們的要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。專業(yè)領(lǐng)域包括成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)、電商網(wǎng)站開發(fā)、微信營銷、系統(tǒng)平臺(tái)開發(fā)。

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 界面的中后臺(tái)產(chǎn)品。iView的組件還是比較齊全的，更新也很快，文檔寫得很詳細(xì)。有公司團(tuán)隊(duì)維護(hù)，比較可靠的Vue UI組件框架。iView生態(tài)也做得很好，還有開源了一個(gè)iView Admin，做后臺(tái)非常方便。官網(wǎng)上介紹，iView已經(jīng)應(yīng)用在TalkingData、阿里巴巴、百度、騰訊、今日頭條、京東、滴滴出行、美團(tuán)、新浪、聯(lián)想等大型公司的產(chǎn)品中。

2、Vux

Vux是基于WeUI和Vue2.x開發(fā)的移動(dòng)端UI組件庫，主要服務(wù)于微信頁面。Vux的定位已經(jīng)很明確了，一是：Vue移動(dòng)端UI組件庫，二是：WeUI的基礎(chǔ)樣式庫。Vux的組件涵蓋了所有的WeUI的內(nèi)容，還擴(kuò)展了一些常用的組件。比如：Sticky、timeline、v-chart、XCircle。Vux是個(gè)人維護(hù)的。但是GitHub上star還是很高的，達(dá)到13k。在GitHub上看到對(duì)issue的關(guān)閉還是很迅速的。Vux文檔基本的組件用法和效果都講解到位了。在vux官網(wǎng)上也展示了很多Vux的使用案例。在微信頁面開發(fā)中，基本沒有太多的bug，開發(fā)還是比較順手的。

3、Element

Element，一套為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 2.0 的桌面端組件庫。Element是餓了么前端開源維護(hù)的Vue UI組件庫，更新頻率還是很高的，基本一周到半個(gè)月都會(huì)發(fā)布一個(gè)新版本。組件齊全，基本涵蓋后臺(tái)所需的所有組件，文檔講解詳細(xì)，例子也很豐富。沒有實(shí)際使用過，網(wǎng)上的Element教程和文章比較多。Element應(yīng)該是一個(gè)質(zhì)量比較高的Vue UI組件庫。

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ì)微的部件，從簡單的動(dòng)畫到框架范圍的國際化系統(tǒng)，可以與 i18n 配對(duì)使用以創(chuàng)建自定義翻譯，甚至添加非內(nèi)置語言。

Element+ 在 GitHub 上擁有 11.1k+ 顆星，正在成為 Github 上最受歡迎的 Vue3 UI 框架之一，它以出色的問題管理、及時(shí)更新、可插入組件和通過SCSS變量的高定制性達(dá)到了開發(fā)者的期望。

4、Mint

Mint UI基于 Vue.js 的移動(dòng)端組件庫，同樣出自餓了么前端的項(xiàng)目。Mint UI是真正意義上的按需加載組件。可以只加載聲明過的組件及其樣式文件。Mint UI 采用 CSS3 處理各種動(dòng)效，避免瀏覽器進(jìn)行不必要的重繪和重排，從而使用戶獲得流暢順滑的體驗(yàn)。網(wǎng)上的視頻教程很多都是基于Mint UI來講的，開發(fā)移動(dòng)端web項(xiàng)目還是很方便，文檔也很簡介明了。很多頁面Mint UI組件都已經(jīng)封裝好，基本可以照著例子寫，簡單的調(diào)整一下就可以實(shí)現(xiàn)。不過，在GitHub上看最后一次代碼提交在2018年1月16日。不知道是項(xiàng)目比較穩(wěn)定沒有更新，還是項(xiàng)目有被廢棄的可能。

5、Bootstrap-Vue

Bootstrap-VUE提供了基于vue2的Bootstrap V4組件和網(wǎng)格系統(tǒng)的實(shí)現(xiàn)，完成了廣泛和自動(dòng)化的WAI ARA可訪問性標(biāo)記。Bootstrap 4是最新發(fā)布的版本，與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關(guān)的部分變成了相關(guān)的組件。同時(shí) Bootstrap.min.css 的體積減少了40%以上。Bootstrap4 放棄了對(duì) IE8 以及 iOS 6 的支持，現(xiàn)在僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。想當(dāng)初剛流行響應(yīng)式網(wǎng)站的時(shí)候，Bootstrap是世界上最受歡迎的建立移動(dòng)優(yōu)先網(wǎng)站的框架，Bootstrap可以說風(fēng)靡全球。就算放在現(xiàn)在很多企業(yè)網(wǎng)站都是采用Bootstrap做的響應(yīng)式。Bootstrap-Vue可以讓你在Vue中也實(shí)現(xiàn)Bootstrap的效果。

6、Ant Design Vue

Ant Design Vue是 Ant Design 3.X 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。在GitHub上可以找到幾個(gè)Ant Design的Vue組件。不過相比較而言，Ant Design Vue更勝一籌。Ant Design Vue共享Ant Design of React設(shè)計(jì)工具體系，實(shí)現(xiàn)了所有Ant Design of React的組件，支持現(xiàn)代瀏覽器和 IE9 及以上（需要 polyfills）?？梢宰屖煜nt Design的在使用Vue時(shí)，很容易的上手。

Ant Design Vue官網(wǎng)：https://vuecomponent.github.io/ant-design-vue/docs/vue/introduce-cn/

Ant Design Vue 是一個(gè)非常成熟的框架，使用 Ant Design Vue 創(chuàng)建用戶界面非常簡單，這些組件可以適應(yīng)各種圖標(biāo)樣式、字體和黑色主題。Ant Design Vue 不斷改進(jìn)其60多個(gè)組件，基本覆蓋項(xiàng)目大部份需求，而且使它們變得更好，更易于訪問。

7、AT-UI

AT-UI 是一款基于 Vue.js 2.0 的前端 UI 組件庫，主要用于快速開發(fā) PC 網(wǎng)站中后臺(tái)產(chǎn)品，支持現(xiàn)代瀏覽器和 IE9 及以上。AT-UI 更加精簡，實(shí)現(xiàn)了后臺(tái)常用的組件。

8、Vant

Vant是一個(gè)輕量、可靠的移動(dòng)端 Vue 組件庫。Vant是有贊團(tuán)隊(duì)開源的，主要維護(hù)也是有贊團(tuán)隊(duì)。Vant Weapp 是有贊移動(dòng)端組件庫 Vant 的小程序版本，兩者基于相同的視覺規(guī)范，提供一致的 API 接口，助力開發(fā)者快速搭建小程序應(yīng)用。截止到目前，Vant已經(jīng)開源了50+ 個(gè)經(jīng)過有贊線上業(yè)務(wù)檢驗(yàn)的組件。比如：、AddressEdit 地址編輯、AddressList 地址列表、Area 省市區(qū)選擇、Card 卡片、Contact 聯(lián)系人、Coupon 優(yōu)惠券、GoodsAction 商品頁行動(dòng)點(diǎn)、SubmitBar 提交訂單欄、Sku 商品規(guī)格彈層。如果做商城的，不太在意界面，實(shí)現(xiàn)業(yè)務(wù)邏輯的話，用Vant組件庫開發(fā)還是很快的。

9、cube-ui

cube-ui 是基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫。由滴滴內(nèi)部組件庫精簡提煉而來，經(jīng)歷了業(yè)務(wù)一年多的考驗(yàn)，并且每個(gè)組件都有充分單元測試，為后續(xù)集成提供保障。在交互體驗(yàn)方面追求極致。遵循統(tǒng)一的設(shè)計(jì)交互標(biāo)準(zhǔn)，高度還原設(shè)計(jì)效果；接口標(biāo)準(zhǔn)化，統(tǒng)一規(guī)范使用方式，開發(fā)更加簡單高效。支持按需引入和后編譯，輕量靈活；擴(kuò)展性強(qiáng)，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開發(fā)。

10、Muse-UI

Muse-UI基于 Vue 2.0 優(yōu)雅的 Material Design UI 組件庫。Muse UI 擁有40多個(gè)UI 組件，用于適應(yīng)不同業(yè)務(wù)環(huán)境。Muse UI 僅需少量代碼即可完成主題樣式替換。Muse UI 可用于開發(fā)的復(fù)雜單頁應(yīng)用

11、N3-components

N3組件庫是基于Vue.js構(gòu)建的，讓前端工程師和全棧工程師能快速構(gòu)建頁面和應(yīng)用。N3-components超過60個(gè)組件 組件列表、自定義樣式、支持多種?；妒剑║MD）、使用ES6進(jìn)行開發(fā)。

12、Mand Mobile

Mand Mobile是面向金融場景的Vue移動(dòng)端UI組件庫，豐富、靈活、實(shí)用，快速搭建優(yōu)質(zhì)的金融類產(chǎn)品，讓復(fù)雜的金融場景變簡單。Mand Mobile含有豐富的組件30+的基礎(chǔ)組件，覆蓋金融場景，極高的易用性組件均有詳細(xì)說明文檔、案例演示，汲取最前沿技術(shù)，組件化輕量化實(shí)現(xiàn)，兼顧穩(wěn)定和品質(zhì)，努力實(shí)現(xiàn)金融場景的全覆蓋。

13、we-vue

we-vue 是一套基于 Vue.js 的移動(dòng)關(guān)組件庫，結(jié)合 weui.css 樣式庫，封裝了一系列組件，非常適于微信公眾號(hào)等移動(dòng)端開發(fā)。we-vue 包含35+ 個(gè)組件，單元測試覆蓋率超 98%，支持 babel-plugin-import，完善的在線文檔，詳細(xì)的在線示例。

14、veui

veui是一個(gè)由百度EFE team開發(fā)的Vue企業(yè)級(jí)UI組件庫。目前文檔還沒有，只有demo。

GitHub上說是正在進(jìn)行的一項(xiàng)工作。那我們就耐心等待吧。

15、Semantic-UI-Vue

Semantic-UI-Vue是基于 Vue.js對(duì)Semantic-UI 框架的實(shí)現(xiàn)。

Semantic作為一款開發(fā)框架，幫助開發(fā)者使用對(duì)人類友好的HTML語言構(gòu)建優(yōu)雅的響應(yīng)式布局。Semantic-UI-Vue提供了一個(gè)類似于 Semantic-UI 的 API 以及一組可定制的主題。

在選擇框架的時(shí)候一定要根據(jù)實(shí)際Web開發(fā)情況和團(tuán)隊(duì)的熟悉程度來選擇。一個(gè)好的UI組件庫對(duì)一個(gè)Web項(xiàng)目來說很重要

16.Vue.js Material Component Framework — Vuetify.js

Vuetify完全根據(jù)Material Design規(guī)范開發(fā)。每個(gè)組件都是手工制作的，為您的下一個(gè)偉大的應(yīng)用程序帶來最好的UI工具。開發(fā)并沒有停留在Google規(guī)范中的核心組件上。通過社區(qū)成員和贊助商的支持，更多的組件將被設(shè)計(jì)并提供給大家享受。

這個(gè)主要是國外比較流行的vue ui組件，各種功能都有，有中文翻譯的，但有些還是英文的，翻譯得不是很好

PS：國內(nèi)的UI組件大部分都只有一部分的，常用的頭部導(dǎo)航，底部導(dǎo)航，listview，grid表格很多都是沒有的。

17、BalmUI

BalmUI 是一款由 Balm.js （一款類似 Vue CLI 的前端工作流工具）團(tuán)隊(duì)打造前端 UI 組件庫，基于最新的 Vue 3 構(gòu)建，開箱即用，定制化強(qiáng)，設(shè)計(jì)風(fēng)格完全遵循谷歌的 Material Design 設(shè)計(jì)規(guī)范，是一款交互體驗(yàn)非常優(yōu)秀的 UI 組件庫。

BalmUI 已經(jīng)發(fā)布了他們的 9.0 版本了，該版本支持Vue3。Balm 基于谷歌的 Material Design，這就是為什么它看起來很熟悉。Balm 附帶 Vue 插件和指令，以及從簡單到復(fù)雜的高度可定制的組件。

BalmUI 發(fā)展非常迅速，如果想使用 Material Design 風(fēng)格，使用復(fù)雜的內(nèi)置指令（如 debouncing 和 UI 波紋）在創(chuàng)建自定義組件時(shí)能派上用場，那么它非常適合 Vue3 項(xiàng)目。

18、Wave UI

Wave UI是一個(gè)響應(yīng)式，可自定義，可訪問且易于觸摸的UI組件框架，它帶有40多個(gè)UI組件，并且與Vue 3和Vue 2兼容。

WaveUI 在Vue3 發(fā)布后進(jìn)行了良好的定位，WaveUI 的開發(fā)是在 Vue3 仍處于alpha階段時(shí)就開始了，其目標(biāo)是在其API穩(wěn)定后立即支持它，使其成為首批 Vue3 UI框架之一。

WaveUI 擁有40多個(gè)漂亮且響應(yīng)迅速的組件，它們的范圍從旋轉(zhuǎn)器到日歷，以及介于兩者之間的任何東西。WaveUI 還提供實(shí)用程序、可定制性和成熟的集成表單驗(yàn)證功能。

WaveUI 提供的組件非常漂亮，動(dòng)畫效果也非常好，它的風(fēng)格在整個(gè)框架中是一致的。企業(yè)級(jí)響應(yīng)式 Vue3 應(yīng)用程序不錯(cuò)的選擇。

19、Vuestic

Vuestic 是 Vue 最漂亮的開源管理面板之一，擅長編寫可維護(hù)的 Vue 代碼，制作靈活的組件和接口。

該團(tuán)隊(duì)最近發(fā)布了 Vuestic 的 Vue3版本，包含了流行的 Vuestic Admin UI 和更多的組件。Vuestic 強(qiáng)調(diào)它對(duì)鍵盤導(dǎo)航的開箱即用支持，由于它提供的用戶體驗(yàn)，這個(gè)特性在前端社區(qū)很受歡迎。

Vuestic 提供了 50 多個(gè)具有獨(dú)特功能和廣泛可配置性的組件，應(yīng)式設(shè)計(jì)，這些組件幾乎適用于所有屏幕分辨率。Vuestic 在整個(gè)框架中提供無縫翻譯支持和鍵盤可訪問性。

Vuestic 已經(jīng)憑借其漂亮的組件目錄確立了自己作為最美觀的 Vue3 UI 框架之一的地位。他們現(xiàn)在正在加快步伐創(chuàng)建更復(fù)雜的組件，例如日期選擇器或數(shù)據(jù)表，它們肯定會(huì)像他們當(dāng)前的產(chǎn)品一樣具有創(chuàng)造性。

20、Ionic

Ionic 是最早提供 Vue3 支持的 UI 框架之一， Ionic 更傾向于移動(dòng) UI，團(tuán)隊(duì)知道如何迎合和維護(hù)一個(gè)優(yōu)秀的 UI 框架。

Ionic Vue 是一個(gè)很成熟的框架，有一個(gè)令人震驚的社區(qū)、大量的 StackOverflow 問題、企業(yè)支持和一個(gè)擁有核心成員的大型 Slack 頻道，這使得可以在需要幫助時(shí)輕松獲得支持。

Ionic Vue 框架在 Github上有 45k+ 顆星，已經(jīng)被很多大公司使用，包括空客（Airbus）和藝電（Electronic Arts），而 Ionic 的團(tuán)隊(duì)以擅長維護(hù)他們的UI框架而聞名，這是現(xiàn)在和未來的一個(gè)很好的選擇。

21、Naive UI

Naive UI 在 Twitter 上發(fā)布，然后被 Vue 的創(chuàng)建者轉(zhuǎn)發(fā)，給這個(gè)新生的組件庫帶來了大量流量。現(xiàn)在，Naive UI 在不到三個(gè)月的時(shí)間里就在 GitHub 上獲得了5.1k 顆星。

它提供了70多個(gè)制作精良的組件，這些組件可以無縫地融入幾乎任何類型的 Vue3應(yīng)用。Naive的組件性能優(yōu)異，可定制性極強(qiáng)，并支持 TypeScript，提供了很棒的開發(fā)體驗(yàn)。

文檔網(wǎng)站易于瀏覽，并具有完整的自定義輸入，可幫助開發(fā)人員預(yù)覽組件在他們自己的主題中的外觀?？梢允褂眠@些選項(xiàng)來創(chuàng)建自己的帶有顏色圖案和字體的完整主題。這個(gè)定制的主題可以下載并輕松添加到應(yīng)用程序中以覆蓋默認(rèn)值。

22、Quasar

Quasar 是一個(gè)完整的、以性能為中心的框架，可幫助構(gòu)建 Vue 用戶界面（SPA、PWA、SSR、移動(dòng)和桌面），除了 Vue、Node 和 Webpack，Quasar 還包含 Cordova、Capacitor 和 Electron，它們可以幫助構(gòu)建桌面和移動(dòng)體驗(yàn)，而無需單獨(dú)學(xué)習(xí)。

Quasar 框架似乎是基于 Material Design，但是一旦開始，一切都可以很好地定制以適應(yīng)自己的設(shè)計(jì)體系。

對(duì) Vue3 支持也很迅速，而且 Quasar 已經(jīng)發(fā)布了幾乎所有的 v1 組件、插件和指令。此外，他們還發(fā)布了可組合組件，幫助開發(fā)人員更深入地了解 Quasar API。

23、PrimeVUE

PrimeVUE 也算是最早支持 Vue3 的框架之一，它并沒有讓人失望。PrimeVUE 擁有 80 多個(gè)組件，證明自己是此列表中組件范圍最廣的框架之一。

組件包括帶有儀表、滑塊、樹、圖形、拆分按鈕、旋鈕、圖表等的密碼表單。PrimeVUE 甚至還集成了一個(gè)表單驗(yàn)證庫 Vuelidate。附帶了預(yù)先制作的主題，并提供了一個(gè)成熟的可視化編輯器，幫助開發(fā)人員定制自己的主題。

到此，關(guān)于“vue可以用的框架有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！