20+個實用的 Vue 元件庫，快來收藏吧！
- 青灯夜游轉載
- 2022-08-11 20:03:273071瀏覽
這篇文章為大家總結分享20 個好用的 Vue 元件庫，可以幫助開發者提升開發效率和美觀性，希望對大家有幫助！
在本文中，將分享一些常見的 vue.js 元件。
表格/資料網格
Vue Tables-2
#網址：https://github.com/matfish2 /vue-tables-2
Vue Tables 2 旨在為開發者提供一個功能齊全的工具集，以便用Vue 建立漂亮而實用的資料表。數百個商業軟體應用正在使用它。此外，Vue Tables 2 正在不斷成長、改進，同時也獲得新的功能。 （學習影片分享：vue影片教學）
特點如下：
- 可選行及黏性頭部
- 虛擬分頁
- 下載客戶元件資料的CSV
- 有資料層支援的多層分組
- Tailwind 主題
Handsontable
#網址：https://github.com/handsontable/handsontable/tree/master/wrappers/vue
Handsontable 是一款頁面端的表格互動插件，可以透過它載入顯示表格內容，能夠支援合併項、統計、行列拖曳等。
支援對載入後的表格頁面的處理：新增/刪除行/列，合併儲存格等操作。
此外，它也適用於 React、Angular 和 Vue。 Handsontable 是一個 JavaScript 元件，它將資料網格功能與電子表格的使用者體驗結合。此外，它還提供資料綁定、資料驗證、過濾、排序和 CRUD 操作。
特點如下：
- 多列排序
- 非連續選擇
- 過濾資料和驗證資料 ##匯出檔案
- 有條件的格式化
- 合併單元格
- #隱藏行/列
- #上下文選單與註解
Ag Grid Vue
地址：https://github.com/ag-grid/ag-grid
Vue Easytable
網址：https://github.com/Happy-Coding-Clans/vue-easytable
- 國際化
- 主題自訂
- 內建主題
- 虛擬捲動
- ##列固定
- 表頭固定
- 表頭分組
網址：https://github.com /xaksis/vue-good-table
Vue-Good-Table 是基於Vue.js 的資料表元件，簡單、乾淨，具有排序、列過濾、分頁等更多基本功能。它有幾個特性：
- 列過濾和分頁
- #複選框表格 ##行分組
- 行樣式
- 行多選
- Notification
Vue Toastification
#網址：https://github.com/Maronato/vue-toastification
#它提供輕巧、簡單和漂亮的吐司提示。它有內建的 Nuxt 支援。而且，它還支援新的 Composition API 和 Vue 3。我們還可以使用 JSX 來開發自訂元件，提供更靈活的功能。另外，通用註冊允許它在任何應用程式內使用，甚至是 React。它有幾點特性：
- 完全用Typescript 寫，支援所有型別
- 支援RTL
- 自訂一切
- 滑動關閉
- 使用onClose、onClick 和onMounted 鉤子建立自訂體驗
- 以程式設計方式刪除和更新吐司
Vue Toasted
#網址：https://github.com/shakee93/vue-toasted
#Vue Toasted 是Vue 最好的toast (提示)外掛之一。它被Vue，Laravel，NuxtJS 等許多組織所信任，它響應性強，兼容性好，使用方便，吸引人，有豐富的功能、圖標、動作等。
Vue Notifications
#網址：https://github.com/se-panfilov/vue-notifications
Vue Notifications 是一個與庫無關的通知元件，非阻塞。
VueNotiments 將您的應用程式與通知 UI 庫連接起來。支援 miniToastr、VueToasted、VueEasyToast、toastr、iziToast、Noty、swal。
Vue Awesome Notifications
網址：https://f3oall.github.io/awesome-notifications/
#Awesome Notifications 是一個輕量級的，完全可自訂的JavaScrip Vue Awesome Notifications，它是Awesome Notifications 庫的Vue.js 版本。
Loader
Vue Wait
網址：https://github.com/f /vue-wait
Vue Wait 這是一個用於VUE、Vuex 和Nuxt 應用的複雜裝載器和進度管理元件。
Vue Wait 協助管理頁面上的多個載入狀態，狀態之間沒有任何衝突。基於一個非常簡單的想法：透過管理具有多個載入狀態的陣列(或 Vuex 儲存)，讓內建載入程式元件偵聽註冊的載入程序，並立即進入載入狀態。
Vue Content Loader
網址：https://github.com/egoist/vue-content-loader
Vue Content Loader 是一個基於Vue.js 的SVG 佔位符加載，可自訂的SVG 元件，用於建立佔位符加載，例如Facebook 加載卡。 Vue Content Loader 是 react-content-loader 的 Vue 實作。
Epic Spinners
##網址：https://epic-spinners.epicmax.co/
EpicSpinners是一組易於使用的純css 打造的網頁Loading 效果，並且同時整合了Vue 元件可以方便的在Vue 專案中進行使用，由於是純css 打造，你可以在任意網頁專案中自行整合並使用！
Vue Radial Progress
網址：https://github.com/wyzantinc/vue-radial-progress
#Vue Radial Progress 這是一個徑向進度條效果的載入器元件，使用svg 和javascript 繪製具有漸進徑向進度條效果的載入器，可用作載入、進度提示。
ICONS
Vue Feather Icons
網址：https://github.com/ egoist/vue-feather-icons
Feather 是一套設計師和開發者的開源圖示庫，是一個簡單漂亮的開源圖示庫。每個圖示都設計在一個24×24的網格上，強調簡單，一致性和易讀性。許多大廠出品的前端框架都內建了這款可以免費商用的圖示。它的特點如下：
- 每一枚圖示都是按照統一標準進行設計，具有完美像素對齊；
- 設計風格一致，完勝那些拼湊混搭的圖示庫；
- 涵蓋多種開發場景的支持，對開發者非常友善。
Vue Awesome
網址：https://github.com/Justineo/vue-awesome
Font Awesome是一套流行的圖標字體庫，我們在實際開發的過程中會經常遇到需要使用圖標的場景，對於一些常用的圖標，不用設計師，我們可以直接在Font Awesome中找到並且使用。個人感覺Font Awesome的圖示還是很齊全的，絕大多數的圖示它都包含了，而且支援各種框架。
Charts
Vue Apexcharts
網址：https://github.com/apexcharts /vue-apexcharts
Apexcharts 是一個現代的JavaScript 圖表庫/可透過簡單的API 建立互動式圖表和視覺化。 Vue Apexcharts 是 ApexCharts 的 Vue.js 元件。
Vue Echarts
##網址：https://github.com/ecomfe/vue-echarts
網址：https://github.com/apertureless/vue-chartjs
##vue-chartjs 是一個Vue對於Chart.js 的封裝，讓使用者可以在Vue中輕鬆使用Chart.js，很簡單的創建可重複使用的圖表組件，非常適合需要簡單的圖表並儘可能快地運行的人。 vue-chartjs抽象化了基本邏輯，同時也揭露了Chart.js對象，讓使用者獲得最大的彈性。
V-Charts
網址：https://github.com/ElemeFE/v-charts
# #V-Charts 是基於Vue2.0 和Echarts 封裝的圖示元件，只需要統一提供對前後端都友善的資料格式設定簡單的配置項，就可以產生常見的圖表。
時間
Vue Timer Hook
網址：https://github.com/ riderx/vue-timer-hook
Vue3 計時器模組的靈感來自react-timer-hook。此外，它是一個自訂的鉤子，用來處理 vue 3 元件中的計時器、碼錶和時間邏輯/狀態。 #########Vue Horizontal Timeline#########網址：https://github.com/guastallaigor/vue-horizontal-timeline############# Vue Horizontal Timeline 是用Vue.js 製作的簡單的水平時間軸元件。 ######（學習影片分享：###web前端開發###、###程式設計基礎影片###）###以上是20+個實用的 Vue 元件庫，快來收藏吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！