20+个实用的 Vue 组件库，快来收藏！

青灯夜游

发布时间：2022-08-11 20:03:27

3711人浏览过

来源于segmentfault

转载

本篇文章给大家总结分享20+个好用的 vue 组件库，可以帮助开发者提高开发效率和美观性，希望对大家有所帮助！

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

在这里插入图片描述

Ag-Grid 是一个基于 Vue.js 的数据表格组件。其中，“ag” 表示 “agnostic”。内部 ag-Grid 引擎是在 TypeScript 中实现的，零依赖关系。

ag-Grid 通过包装器组件支持 Vue，你可以在应用程序中，就像其他任何 Vue 组件一样使用 ag-Grid。它支持通过属性绑定传递配置，通过事件绑定来处理事件。你甚至可以使用 Vue 组件来自定义网格 UI 和单元格内容/行为。

Vue Easytable

地址：https://github.com/Happy-Coding-Clans/vue-easytable

在这里插入图片描述

vue-easytable 是我遇到过的最强大的 Vue 表格组件之一。

表格组件具有许多内置功能，比如说，单元格省略号、固定/灵活的列大小调整、自定义过滤等等。它有几个特点：

国际化
主题定制
内置主题
虚拟滚动
列固定
表头固定
表头分组

Vue Good Table

地址：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

Vuex参考手册中文CHM版

Vuex是一个专门为Vue.js应用设计的状态管理模型 + 库。它为应用内的所有组件提供集中式存储服务，其中的规则确保状态只能按预期方式变更。它可以与 Vue 官方开发工具扩展(devtools extension) 集成，提供高级特征，比如零配置时空旅行般（基于时间轴）调试，以及状态快照导出/导入。本文给大家带来Vuex参考手册，需要的朋友们可以过来看看！

下载

在这里插入图片描述