快捷導(dǎo)航

7個(gè)適用于Vue?3的高顏值UI組件庫(kù)

更新時(shí)間：2022年12月10日 09:21:43 作者：風(fēng)水道人

這篇文章主要給大家分享介紹了7個(gè)適用于Vue?3的高顏值UI組件庫(kù),合理利用,又或者學(xué)習(xí)借鑒都是不錯(cuò)的選擇,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下

前言

Vue 3.0 已經(jīng)發(fā)布兩年多的時(shí)間，今年 2 月 Vue 3.0 也正式成為新的默認(rèn)版本。今天就來(lái)分享 7 個(gè)適用于 Vue 3 的高顏值 UI 組件庫(kù)！

Element Plus

Element Plus 是一套由餓了么開源出品的為開發(fā)者、設(shè)計(jì)師和產(chǎn)品經(jīng)理準(zhǔn)備的基于 Vue 3.0 的組件庫(kù)。Element Plus 使用 TypeScript + Composition API 進(jìn)行了重構(gòu)，提供完整的類型定義文件，使用 Vue 3.0 Composition API 降低耦合、簡(jiǎn)化邏輯，使用 Lerna 維護(hù)和管理項(xiàng)目，完善了 52 種國(guó)際化語(yǔ)言支持，支持了黑暗模式。

由于 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 瀏覽器，其環(huán)境支持情況如下：

Github：https://github.com/element-plus/element-plus

官方文檔：https://element-plus.org/zh-CN/

Ant Design Vue

Ant Design of Vue 是 Ant Design 的 Vue 實(shí)現(xiàn)，開發(fā)和服務(wù)于企業(yè)級(jí)后臺(tái)產(chǎn)品。其具有以下特性：

提煉自企業(yè)級(jí)中后臺(tái)產(chǎn)品的交互語(yǔ)言和視覺風(fēng)格。
開箱即用的高質(zhì)量 Vue 組件。
共享 Ant Design of React 設(shè)計(jì)工具體系。

Ant Design Vue 支持服務(wù)端渲染，支持在 Electron 中使用，其環(huán)境支持情況如下：

Github：https://github.com/vueComponent/ant-design-vue

官方文檔：https://antdv.com/components/overview

Naive UI

Naive UI 是一款由圖森未來(lái)開源，基于 Vue 3.0/TypeScript 技棧開發(fā)的 UI 組件庫(kù)。其具有以下特點(diǎn)：

組件豐富完整，超過70個(gè)常用業(yè)務(wù)組件，支持按需引入；
官方提供主題編輯器，不用繁瑣的 less、sass、css 變量，也不用 webpack 的 loaders，使用的是由 TypeScript 構(gòu)建的先進(jìn)的類型安全主題系統(tǒng)；
運(yùn)行快小巧輕量，專門針對(duì)樣式優(yōu)化，所有組件都可以 treeshaking，不需要導(dǎo)入任何 CSS 就能讓組件正常工作。

Github：https://github.com/tusen-ai/naive-ui

官方文檔：https://www.naiveui.com/

VARLET

Varlet 是一個(gè)基于 Vue3 開發(fā)的 Material 風(fēng)格移動(dòng)端組件庫(kù)，全面擁抱 Vue3 生態(tài)，由社區(qū)團(tuán)隊(duì)維護(hù)。其支持 Typescript、按需引入、暗黑模式、主題定制、國(guó)際化，并提供 VS Code 插件保障良好的開發(fā)體驗(yàn)。