7個適用於Vue 3的高顏值UI組件庫

Posted on by

前言

Vue 3.0 已經發佈兩年多的時間，今年 2 月 Vue 3.0 也正式成為新的默認版本。今天就來分享 7 個適用於 Vue 3 的高顏值 UI 組件庫！

Element Plus

Element Plus 是一套由餓瞭麼開源出品的為開發者、設計師和產品經理準備的基於 Vue 3.0 的組件庫。Element Plus 使用 TypeScript + Composition API 進行瞭重構，提供完整的類型定義文件，使用 Vue 3.0 Composition API 降低耦合、簡化邏輯，使用 Lerna 維護和管理項目，完善瞭 52 種國際化語言支持，支持瞭黑暗模式。

由於 Vue 3 不再支持 IE11，Element Plus 也不再支持 IE 瀏覽器，其環境支持情況如下：

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

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

Ant Design Vue

Ant Design of Vue 是 Ant Design 的 Vue 實現，開發和服務於企業級後臺產品。其具有以下特性：

  • 提煉自企業級中後臺產品的交互語言和視覺風格。
  • 開箱即用的高質量 Vue 組件。
  • 共享 Ant Design of React 設計工具體系。

Ant Design Vue 支持服務端渲染，支持在 Electron 中使用，其環境支持情況如下：

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

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

Naive UI

Naive UI 是一款由圖森未來開源，基於 Vue 3.0/TypeScript 技棧開發的 UI 組件庫。其具有以下特點：

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

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

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

VARLET

Varlet 是一個基於 Vue3 開發的 Material 風格移動端組件庫，全面擁抱 Vue3 生態，由社區團隊維護。其支持 Typescript、按需引入、暗黑模式、主題定制、國際化，並提供 VS Code 插件保障良好的開發體驗。

Github：https://github.com/varletjs/varlet

官方文檔：https://varlet.gitee.io/varlet-ui/#/zh-CN/index

NutUI

NutUI 是一套由京東出品的移動端 Vue2、Vue3 組件庫，支持一套代碼生成 H5 和小程序。其具有以下特點：

  • 70+ 高質量組件，覆蓋移動端主流場景
  • 支持按需引用
  • 支持 TypeScript
  • 支持服務端渲染
  • 支持組件級別定制主題，內置 700+ 個變量
  • 國際化支持，已支持英文，印尼語和繁體中文
  • 單元測試覆蓋率超過 80%，保障穩定性
  • 提供 Sketch 設計資源

Github：https://github.com/jdf2e/nutui

官方文檔：https://nutui.jd.com/#/

Vant

Vant 是一套由有贊出品的輕量、可靠的移動端組件庫。目前 Vant 官方提供瞭 Vue 2 版本、Vue 3 版本和微信小程序版本。其具有以下特點：

  • 性能極佳，組件平均體積小於 1KB（min+gzip）
  • 70+ 個高質量組件，覆蓋移動端主流場景
  • 零外部依賴，不依賴三方 npm 包
  • 使用 TypeScript 編寫，提供完整的類型定義
  • 單元測試覆蓋率超過 90%，提供穩定性保障
  • 提供 Sketch 和 Axure 設計資源
  • 支持主題定制，內置 700+ 個主題變量
  • 支持按需引入和 Tree Shaking
  • 支持深色模式
  • 支持 Nuxt 3
  • 支持服務器端渲染
  • 支持國際化，內置 20+ 種語言包

Github：https://github.com/youzan/vant

官方文檔：https://vant-ui.github.io/vant/

Arco Design

Arco Design 是一套由字節跳動出品的基於 Arco Design 的 Vue UI 組件庫。提供瞭 60 多個開箱即用的高質量組件, 可以覆蓋絕大部分業務場景。

Github：https://github.com/arco-design/arco-design-vue

總結

到此這篇關於7個適用於Vue 3的高顏值UI組件庫的文章就介紹到這瞭,更多相關Vue3高顏值UI組件庫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：