在本文中,，我們將探討一些最常見的vue js組件,。你可以收藏一波。

Vue Tables-2

地址：https://github.com/matfish2/vue-tables-2

Vue Tables 2旨在為開發(fā)者提供一個功能齊全的工具集,，以便用 Vue 創(chuàng)建漂亮而實用的數(shù)據(jù)表格,。數(shù)百個商業(yè)軟件應(yīng)用正在使用它。此外,，Vue Tables 2正在不斷成長,、改進(jìn)，同時也在獲得新的功能,。

特點

• 可選行及粘性頭部
• 虛擬分頁
• 下載客戶組件數(shù)據(jù)的CSV
• 有數(shù)據(jù)層支持的多級分組
• Tailwind 主題

Handsontable

地址：https://github.com/handsontable/handsontable/tree/master/wrappers/vue

handsontable是一款頁面端的表格交互插件,，可以通過它加載顯示表格內(nèi)容,，能夠支持合并項、統(tǒng)計,、行列拖動等,。

同時，支持對加載后的表格頁面的處理：添加/刪除行/列,，合并單元格等操作,。

此外，它還適用于React,、Angular和Vue,。Handsontable 是一個JavaScript組件，它將數(shù)據(jù)網(wǎng)格功能與電子表格的用戶體驗相結(jié)合,。此外,，它還提供數(shù)據(jù)綁定、數(shù)據(jù)驗證,、過濾,、排序和CRUD操作。

特點

• 多列排序
• 非連續(xù)選擇
• 過濾數(shù)據(jù)和驗證數(shù)據(jù)
• 導(dǎo)出文件
• 有條件的格式化
• 合并單元格
• 隱藏行/列
• 上下文菜單和注釋

Ag Grid Vue

地址：https://github.com/ag-grid/ag-grid

Ag-Grid 是一個基于Vue.js的數(shù)據(jù)表格組件,。其中,，“ag” 表示 “agnostic”。內(nèi)部 ag-Grid引擎是在TypeScript中實現(xiàn)的,，零依賴關(guān)系,。

ag-Grid通過包裝器組件支持Vue，你可以在應(yīng)用程序中,，就像其他任何Vue組件一樣使用ag-Grid,。它支持通過屬性綁定傳遞配置，通過事件綁定來處理事件,。你甚至可以使用Vue組件來自定義網(wǎng)格UI和單元格內(nèi)容/行為,。

Vue Easytable

地址：https://github.com/huangshuwei/vue-easytable

vue-easytable是我遇到過的最強(qiáng)大的Vue表格組件之一。

表格組件具有許多內(nèi)置功能,，比如說,，單元格省略號、固定/靈活的列大小調(diào)整,、自定義過濾等等,。它有幾個特點：

• 國際化
• 主題定制
• 內(nèi)置主題
• 虛擬滾動
• 列固定
• 表頭固定
• 表頭分組

Vue Good Table

地址：https://github.com/xaksis/vue-good-table

Vue-Good-Table是一個基于Vue.js的數(shù)據(jù)表組件，簡單,、干凈,，具有排序、列過濾、分頁等更多基本功能,。它有幾個特性：

• 表搜索和排序
• 列過濾和分頁
• 復(fù)選框表格
• 行分組
• 行樣式
• 行多選

Vue Toastification

地址：https://github.com/Maronato/vue-toastification

它提供輕巧,、簡單和漂亮的吐司提示。它有內(nèi)置的Nuxt支持,。而且,，它還支持新的Composition API和Vue 3。我們還可以J使用SX來開發(fā)自定義組件,，提供更加靈活的功能,。另外，通用注冊允許它在任何應(yīng)用程序內(nèi)使用,，甚至是React,。它有幾點特性：

• 完全用Typescript編寫，支持所有類型
• 支持RTL
• 定制一切
• 滑動關(guān)閉
• 使用onClose,、onClick和onMounted鉤子創(chuàng)建自定義體驗
• 以編程方式刪除和更新吐司

Vue Toasted

地址：https://github.com/shakee93/vue-toasted

Vue Toasted是 Vue 最好的toast(提示)插件之一,。它被Vue，Laravel,，NuxtJS 等許多組織所信任,，它響應(yīng)性強(qiáng)，兼容性好,，使用方便,，吸引人，有豐富的功能,、圖標(biāo),、動作等。

Vue Notifications

地址：https://github.com/se-panfilov/vue-notifications

Vue Notifications是一個與庫無關(guān)的通知組件,，非阻塞,。

VueNotiments將您的應(yīng)用程序與通知UI庫連接起來。支持miniToastr,、VueToasted,、VueEasyToast、toastr,、iziToast,、Noty、swal,。

Vue Awesome Notifications

地址：https://f3oall./awesome-notifications/

Awesome Notifications是一個輕量級的，完全可自定義的JavaScrip Vue Awesome Notifications,，它是Awesome Notifications庫的Vue.js版本,。

Vue Wait

地址：https://github.com/f/vue-wait

Vue Wait 這是一個用于VUE、Vuex和Nuxt應(yīng)用的復(fù)雜裝載器和進(jìn)度管理組件。

Vue Wait幫助管理頁面上的多個加載狀態(tài),，狀態(tài)之間沒有任何沖突,。基于一個非常簡單的想法：通過管理具有多個加載狀態(tài)的數(shù)組(或者Vuex存儲),，讓內(nèi)置加載程序組件偵聽注冊的加載程序,，并立即進(jìn)入加載狀態(tài)。

Vue Content Loader

地址：https://github.com/egoist/vue-content-loader

Vue Content Loader是一個基于Vue.js的SVG占位符加載,，可自定義的SVG組件,，用于創(chuàng)建占位符加載，例如Facebook加載卡,。Vue Content Loader是react-content-loader的Vue實現(xiàn),。

1. 完全可定制：你可以改變顏色，速度和大小
2. 創(chuàng)建自己的加載：使用在線工具輕松創(chuàng)建你的自定義加載
3. 你現(xiàn)在就可以使用它：已經(jīng)有很多預(yù)設(shè)了
4. 性能

Epic Spinners

地址：https://epic-spinners./

EpicSpinners是一組易于使用的純css打造的網(wǎng)頁Loading效果,，并且同時整合了Vue組件可以方便的在Vue項目中進(jìn)行使用,，由于是純css打造，你可以在任意網(wǎng)頁項目中自行整合并使用,！

Vue Radial Progress

地址：https://github.com/wyzant-dev/vue-radial-progress

Vue Radial Progress 這是一個徑向進(jìn)度條效果的加載器組件,，使用svg和javascript繪制帶有漸變徑向進(jìn)度條效果的加載器，可以用作加載,、進(jìn)度提示,。

ICONS

Vue Feather Icons

地址：https://github.com/egoist/vue-feather-icons

Feather 是一套面向設(shè)計師和開發(fā)者的開源圖標(biāo)庫，是一個簡單漂亮的開源圖標(biāo)庫,。每個圖標(biāo)都設(shè)計在一個24×24的網(wǎng)格上,，強(qiáng)調(diào)簡單，一致性和易讀性,。很多大廠出品的前端框架都內(nèi)置了這款可以免費(fèi)商用的圖標(biāo),。

特點

• 每一枚圖標(biāo)都是按照統(tǒng)一標(biāo)準(zhǔn)進(jìn)行設(shè)計，具有完美像素對齊,；
• 設(shè)計風(fēng)格一致,，完勝那些拼湊混搭的圖標(biāo)庫；
• 覆蓋多種開發(fā)場景的支持,，對開發(fā)者非常友好,。

Vue Awesome

地址：https://github.com/Justineo/vue-awesome

Font Awesome是一套流行的圖標(biāo)字體庫，我們在實際開發(fā)的過程中會經(jīng)常遇到需要使用圖標(biāo)的場景,，對于一些常用的圖標(biāo),，不用設(shè)計師，我們可以直接在Font Awesome中找到并且使用,。個人感覺Font Awesome的圖標(biāo)還是很齊全的,，絕大多數(shù)的圖標(biāo)它都包含了，而且支持各種框架。

Vue Material Design Icons

地址：https://github.com/robcresswell/vue-material-design-icons

一個作為單文件組件的SVG Material Design圖標(biāo)集合,。此外,，這個庫是一個Vue單文件組件的集合，用于渲染Material Design圖標(biāo),。此外,，它還包括一些CSS，有助于使圖標(biāo)的縮放更容易一些,。

Charts

Vue Apexcharts

地址：https://github.com/apexcharts/vue-apexcharts

Apexcharts是一個現(xiàn)代的JavaScript圖表庫/可通過簡單的API構(gòu)建交互式圖表和可視化,。Vue Apexcharts是ApexCharts的Vue.js組件。

Vue Echarts

地址：https://github.com/Justineo/vue-echarts

vue-echarts是基于echarts封裝實現(xiàn)的一個組件庫,，直接按照正常的組件引用方式,，安裝引用即可，具體的安裝和引用讀者可以直接閱讀vue-echarts技術(shù)文檔,。

Vue Chartjs

地址：https://github.com/apertureless/vue-chartjs

vue-chartjs 是一個 Vue 對于 Chart.js 的封裝,，讓用戶可以在Vue中輕松使用Chart.js，很簡單的創(chuàng)建可復(fù)用的圖表組件,，非常適合需要簡單的圖表并盡可能快地運(yùn)行的人,。vue-chartjs抽象了基本邏輯，同時也暴露了Chart.js對象,，讓用戶獲得最大的靈活性,。

V-Charts

地址：https://github.com/ElemeFE/v-charts

V-Charts 是基于 Vue2.0 和 Echarts 封裝的圖標(biāo)組件，只需要統(tǒng)一提供一種對前后端都友好的數(shù)據(jù)格式設(shè)置簡單的配置項,，就可以生成常見的圖表,。

時間

Vue Timer Hook

地址：https://github.com/riderx/vue-timer-hook

Vue3 計時器模塊的靈感來自 react-timer-hook。此外,，它是一個自定義的鉤子,，用來處理vue 3 組件中的定時器、秒表和時間邏輯/狀態(tài),。

Vue Horizontal Timeline:

地址：https://github.com/guastallaigor/vue-horizontal-timeline

Vue Horizontal Timeline 是一個用Vue.js制作的簡單的水平時間線組件,。