Vue UI 組件：15 個庫和工具包

正如我們在年度前端框架報告中看到的那樣，Vue.js 作為最流行的 Web 開發 JavaScript 框架穩居前三名。 而且，在 2022 年 2 月——Evan You 宣布 Vue 將遷移到 Vue 3 作為默認版本。

本綜述是我為各種框架所做的系列文章的一部分。 值得注意的是，我收集了 Tailwind CSS 組件庫，還有我對性能最佳的 React UI 庫的評論。 Vue 的方法將完全相同。

我們將重點關注既處於積極開發階段又支持新的 Vue 3 版本*的庫。 我可以提前說，許多圖書館之所以沒有入選，僅僅是因為它們最近一次更新是在幾年前。 對於每天都在發展的框架，使用支持不足的庫是沒有意義的。

* 此規則有一些例外。 一些庫沒有任何更新到 Vue 3 的計劃，但仍在積極開發中。 還有一些計劃在未來進行更新，但從維護的角度來看，這是相當多的工作。

類星體

Quasar 實際上是一個框架中的一個框架。 對於需要大量工具來構建用戶界面的開發人員來說，它是首選之一。 受歡迎程度很大程度上源於 Quasar 內置了對各種構建模式的支持。

因此，無論您是構建 SPA、PWA 還是移動應用程序，您都無需費力即可開始。 而且，最重要的是，儘管有大量的功能——如果你建立一個小型個人網站，Quasar 只會排隊該項目所需的資源。

這有助於避免使用未使用的代碼使您的項目變得臃腫。 最後，所有用 Quasar 編寫的代碼都被共享為一個統一的代碼庫。 因此，如果您正在構建單頁應用程序，您也可以輕鬆地將其導出為移動應用程序。

阿科設計

Arco 是一個深受 React.js 開發人員歡迎的企業級設計系統。 然而，Arco Design 也有一個 Vue.js 版本。 而且，與獨立開發人員構建的個人 UI 庫不同，Arco包含功能和設計文件。

其中包括每個組件的 Figma 和 Sketch 文件。 一個自定義圖標庫和 60 多個自定義組件的集合，可供即時下載。

借助所有這些資源，您可以在幾分鐘內完成設計模型。

驗證

每個人都喜歡材料設計，對吧？ Vuetify UI 庫加載了基於 Material Design 規範的定制組件。 它也是從一開始就與 Vue.js 一起使用的老式庫之一。 這最好反映在圖書館必須提供的東西上，以及它與其他圖書館的比較。

僅基於此比較表，我們可以看到 Vuetify 確實在努力確保開發人員擁有所有最好的工具。 我也可以說模板系統很容易學習。 就像您將學習 Tailwind CSS 的實用程序類一樣。

Vue 引導程序

 關於這個庫唯一需要注意的是，它的更新有點遲緩。 正如這個 GitHub 問題中所解釋的 - 他們正在尋找新的維護者來幫助將庫更新到具有 Vue 3 支持的 Bootstrap 5。 而且我認為他們會在適當的時候將其包括在內，因此儘管我在文章開頭說過的話，我仍將包括在內。

至於其他一切——這個組件庫可以滿足您的期望。 這是一個可以與 Vue.js 框架一起使用的 Bootstrap 實現。 它針對可訪問性進行了優化，並且它的所有組件都包含在文檔中的大量示例。

由於模塊化支持，您可以只使用您需要的東西並跳過其餘部分。

布菲

布爾瑪並沒有得到應有的愛。 它是那些設法避開所有趨勢和前端瘋狂的 CSS 框架之一。 但是，它仍然是一個非常好的框架，現在您可以通過 Buefy 庫將 Bulma 與 Vue 一起使用。 它易於使用並強調輕巧的結構。

如果您以前使用過 Bulma，Buefy 會保留所有漂亮的 Bulma UI 組件。 此外，您還可以獲得每個組件變體的預製代碼示例。 該文檔還包含指向 CodePen 的鏈接，因此您可以在不啟動庫的情況下使用示例。

 請注意，Buefy 嚴格來說是一個 Vue 2 庫，並且沒有計劃更新到 Vue 3，因為它工作量太大。 另一種方法是使用具有可用 Bulma 指令的 Oruga（也包含在本綜述中）。

優雅

Grace 是一個定制的設計系統。 它是使用 TypeScript、SASS、Jest 和 Rollup 進行捆綁實現的。 該項目正在開發中，需要正確更新其文檔。 雖然，維護人員已經開始為這個特定案例打開 GitHub 問題，因此情況似乎會如此。

Vuetensils

如果您更喜歡使用組件庫作為起點，同時可以自由地自己設計所有內容 - Vuetensils 是專門為此目的而設計的框架。

它確實有一個廣泛的組件庫，隨時可用，您還可以選擇您需要的組件。 樣式背後的理念是，在其核心，一切都保持最小，以避免用未使用的樣式塞滿您的項目。

樸素的用戶界面

Naive UI 是一個集成了性能優化的 Vue 3 組件庫。 它是為已經在使用 TypeScript 的開發人員構建的。 這些組件具有簡潔的結構，幾乎涵蓋了所有可以想像的場景。

通過添加預製佈局組件 - Naive UI 是用於新網站項目的可靠候選者。 您還可以使用全局主題或逐步構建自己的配置來定義自定義配置。

Vuestic 用戶界面

Vuestic 是一個時尚的 Vue 3 UI 框架，它提供了 50 多個響應式組件、集成的輔助功能，並支持所有主要瀏覽器：Web 和移動。 您還可以訪問定制的管理儀表板模板——讓您啟動構建為 SaaS 產品的項目。

組件設計感覺非常簡潔，並沒有強加嚴格的特性。 因此，Vuestic UI 應該適用於各個方面的項目。

變量 UI

Varlet 是此列表中第一個（兩個中的）UI 庫，它是作為移動優先工具包構建的。

它與 Material Design 集成，涵蓋了移動應用程序開發中使用的大量組件。 Varlet 持續支持服務器端渲染。

您可以使用文檔中的組件。 但是，推薦的嘗試方法是使用 VS Code 或 WebStorm，作者為此提供了本機語法高亮解決方案。

 Vue 的創建者（Evan You）是華裔，這與許多來自中國、日本和韓國等國家的人更喜歡使用 Vue 而不是其他框架的事實直接相關。 這也意味著 Vue 社區在東方國家比在美國等地活躍得多——在美國，React 被視為第一大框架。

奧魯加

Oruga 是一個與框架無關的 Vue UI 組件庫。 這個想法是您要么使用提供的組件並自己設置樣式，要么使用外部框架（例如 Bulma）在現有組件的基礎上構建。

Orgua 的一個有趣特性是組件不僅僅是簡單的接口。 但是，其中很多還帶有附加功能。 在文檔中，您將擁有所有必要的 Props 定義，以及 CSS 和 SASS 中的各個變量名稱。

波用戶界面

Wave UI 建立在組件應該可以使用 CSS 進行定制的理念之上。 因此，即使組件具有自定義樣式 - 您也可以使用 CSS 覆蓋自定義參數，而無需強制使用特定屬性。

設計風格相當適中，儘管對於某些人來說，它可能會覺得邊緣最小。

Wave UI 確實帶有自己的佈局定義。 這可以作為 Spaces 使用，也可以作為 Flexbox 和 Grid 使用。 實用程序類很容易理解——因此構建複雜的結構不會成為問題。

脈輪 UI Vue

Chakra UI 可能是最著名的 React 首選庫之一。 但它確實有一個 Vue 版本。 因此，無論您是 Chakra 的新手還是曾經使用過它 - 使用 Vue 版本都會感覺完全一樣。

該庫以其嚴格的可訪問 Web 開發方法而聞名。 這是通過確保每個組件與 WAI-ARIA 指南兼容來實現的。

但脈輪最突出的領域是組合組件的能力。 換句話說，您可以重用組件元素將它們混合在一起。 這使您可以實現原本無法實現的組件結構和样式。

螞蟻設計 Vue

Ant Design 是現代 Web 開發的領先設計系統之一。 我們已經在之前關於 React 庫的文章中介紹了他們的產品。

但是，總而言之——Ant Design 專注於實現一種設計理念，而不是你只是插入到一個隨機項目中的一組組件。 因此，在從事專業（企業級）項目時，您將希望使用此庫。

從指南到組件理念的所有內容都在他們的文檔中進行了仔細解釋。

萬特

Vant 是為移動開發而構建的第二個（也是最後一個！）組件庫。 GitHub 上有 20,000 顆星——您可以放心，它絕對是這個部門的野獸。

這些組件被設計為盡可能輕量級，平均組件大小只有 1kb。 Vant 使用 TypeScript，並且還有一些設計資源可用作 Sketch 或 Axure 的導出。

草圖資源也可以在 Figma 中導入。

如果您進行移動開發並使用 Vue – Vant 可能是最好的庫之一。 文檔內容廣泛，自定義組件結構的能力意味著它非常適合 SPA 和 PWA 項目。

使用組件庫啟動新項目

相當多的前端開發由組件庫管理。 事實上，最流行的框架都實現了組件驅動的方法。 可以肯定地說，Vue 一直是許多人的首選，尤其是東部地區的社區。

如果您以前做過 Web 開發項目（使用現代堆棧），那麼開始使用 Vue.js 非常容易。 這也是使用該框架的最大好處之一。 你也不需要學習 TypeScript，儘管 Vue 可以很好地使用它。