公司開發(fā)大型項目時，為了快速開發(fā)，往往會選擇一個合適的 ui 框架進行開發(fā)，ui 框架最大的優(yōu)點就是能夠大大節(jié)省開發(fā)時間。

所以在開發(fā)項目之前，我們需要先了解功能需求，考慮使用的 ui 框架，是否都能滿足功能需要，比如制作移動端的項目，不能選擇一個PC端的 UI 框架。

所以我們需要熟悉一些 ui 框架，便于我們在開始項目之前選型。下面幫大家推薦一些支持 Vue3 且免費的 UI 框架。歡迎大家在評論區(qū)多多交流！

收藏關(guān)注，手留余香！

一、移動端常用 UI 框架

1.1、uni-app

官網(wǎng)：
https://uniapp.dcloud.io/migration-to-vue3

介紹：uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個平臺。

優(yōu)點：不僅支持 H5 應(yīng)用、IOS、安卓還有各個應(yīng)用平臺的小程序，一套代碼編到13個平臺，這不是夢想。不僅開發(fā)效率高，維護起來也特別方便。

uni-app 在手，做啥都不愁。主要是它能夠經(jīng)得起企業(yè)項目的考驗，被不少的企業(yè)用來開發(fā)商用項目，常見的應(yīng)用有：CSDN、開源中國、張亮麻辣燙、咪咕商城、中國銀聯(lián)等等。

一般開發(fā)移動端項目時，第一個想到的框架就會是 uni-app，如果我們首次只做微信小程序，后期如果想做支付寶或抖音小程序時，擴展起來非常方便，就不需要再根據(jù)別的平臺再寫一套代碼。

1.2、Vant

官網(wǎng)：
https://youzan.github.io/vant/v3/#/zh-CN/home

Vant 是由有贊前端團隊開源的移動端組件庫，是目前主流的移動端組件庫之一。

Vant 不僅提供 Vue2 和 Vue3 版本以及微信小程序版本支持，同時也提供了 React 版本和支付寶小程序版本。

提供了很多高質(zhì)量組件，基本覆蓋移動端主流場景。是一款輕量、可靠的移動端組件庫，非常值得推薦。

1.3、Nut UI

官網(wǎng)：https://nutui.jd.com/#/

介紹：是由京東技術(shù)團隊開發(fā)的，不僅支持 vue2 還支持 vue3 的移動端 ui 框架。

優(yōu)點：不僅支持前沿技術(shù)，能夠適配多端小程序，組件內(nèi)容也豐富，質(zhì)量有保障。單元測試率 90%以上。兼容目前主流瀏覽器、支持按需加載、支持服務(wù)端渲染。配套有基于Webpack和 vite 構(gòu)建工具，可快速創(chuàng)建已內(nèi)置本組件庫的 vue 工程。

1.4、Taro

官網(wǎng)：
https://taro-docs.jd.com/taro/docs/vue3/

介紹：Taro 是一個開放式跨端跨框架解決方案，支持使用 React/Vue/Nerv 等框架來開發(fā) 微信 / 京東 / 百度 / 支付寶 / 字節(jié)跳動 / QQ / 飛書 小程序 / H5 / RN 等應(yīng)用。

優(yōu)點：與 uni-app 一樣，一套代碼支持多端適配，大大降低了開發(fā)成本。支持框架 vue 、vue3 以及 react。

1.5、Taro UI Vue3

介紹：基于 Taro 開發(fā)，采用 Vue 3.0 重寫的 Taro UI 組件庫，與 Taro 一樣一套代碼可在多個終端運行。

缺點：只支持 vue3 ，不能想下支持。

下面是一些僅支持 vue2 版本以下的一些移動端框架：

Muse-UI ：https://muse-ui.org/#/zh-CN

vux：https://doc.vux.li/zh-CN/about/before-using-vux.html

mint-ui：http://mint-ui.github.io/#!/zh-cn

Cube UI：https://didi.github.io/cube-ui/#/zh-CN

有興趣的可以自己去看看，本篇文章主要介紹支持 vue3 的 ui 框架。

二、PC端的 ui 框架

2.1、Ant Design Vue

官網(wǎng)：
https://next.antdv.com/components/button-cn

是一個非常成熟的框架，開發(fā)和服務(wù)于企業(yè)級后臺的產(chǎn)品。使用 Ant Design Vue 創(chuàng)建用戶界面非常簡潔，組件使用也很簡單，組件可以使用于各種圖片樣式、字體和黑色主題。其中組件基本能夠覆蓋項目大部分需求。

官方示例如圖：

Vue3 的 Ant Design Vue 框架在性能、易用性、功能上都有很大的提升，它的包更小，感覺更輕，并且支持 SSR 。

使用 框架的時候，請注意切換到 vue3 版本下的文檔，防止有些組件加載或事件觸發(fā)等出現(xiàn)問題，而且 2.x 升級 3.x 之后移除了部分API，也新增了一些API。使用時請參照官方文檔。

小編就經(jīng)常使用這個框架開發(fā)公司的后臺管理項目，個人感覺蠻不錯的！

2.2、Element+

官網(wǎng)：
https://element-plus.gitee.io/zh-CN/

餓了么前端團隊推出的一款 Element Plus，一套為開發(fā)者、設(shè)計師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3 的桌面端組件庫。

為 Vue3 帶來了大量不引人注目的組件，創(chuàng)建一個非常復(fù)雜的應(yīng)用程序，所需要的功能需求基本都能夠滿足。官方文檔寫得也特別詳細(xì)，根據(jù)文檔，能夠快速上手。

Element+ 在 gitHub 上擁有 12.9k satr。正在成為 github 上受到熱烈歡迎的 Vue3 ui 框架之一。

2.3、BalmUI

官網(wǎng)：
https://next-material.balmjs.com/#/

BalmUI 是為 Vue.js 3.0 量身訂制的模塊化且高可定制化的 Material Design UI 庫， 已經(jīng)更新到 9.38.2 版本了。

優(yōu)點：Balm 不僅附帶 vue 插件和指令，還提供一些復(fù)雜內(nèi)置指令，實現(xiàn)常見一些效果，大大地減輕了工作量。更新比較頻繁，不用擔(dān)心以后有潛在問題難以解決。

如果使用 vue3 開發(fā)項目，Balm 是一個不錯的選擇。

2.4、Vuestic

官網(wǎng)：
https://vuestic.dev/en/introduction/overview

介紹：支持 vue3 完全免費的一個 ui 框架。

優(yōu)點：包含的組件豐富，能夠滿足項目開發(fā)的基本需求，允許全局設(shè)置 css 進行全局組件樣式控制，能夠支持大部分瀏覽器。

缺點：官方文檔不支持中文版，英語較差的看文檔比較吃力。

2.5、Naive UI

官網(wǎng)：
https://www.naiveui.com/zh-CN/os-theme

介紹：Naive UI 是一個 vue3 的組件庫，使用 typeScript 寫的，速度較快。

優(yōu)點：Naive UI 全量使用 TypeScript 編寫，和你的項目可以實現(xiàn)無縫對接。所有的組件都支持搖樹優(yōu)化，項目運行順暢，速度稍快。相比其他組件，樣式豐富。我個人挺喜歡這些設(shè)計的。

缺點：naive-ui 僅支持 Vue3 。如果你在使用 Vue2，是不支持的呦。

由于 vue3 大規(guī)模應(yīng)用時間較短，所以移動端能夠支持 vue3 的 ui 框架較少，相比 PC 端的能夠支持 vue3 的框架較多，本篇文章只介紹了 5 個 pc 端框架。

如果你有推薦的框架，歡迎在下方留言。

好了小編今天的文章就到此結(jié)束了，喜歡我的可以點個關(guān)注哦