2021,17个|2021,17个 最流行的 Vue 插件
作者: John Lim
译者:前端小智
来源:vuemastery
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。Vue 被一个健康的插件和包的生态系统所加强,使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架,所以有一个不断增长的插件和包库,你可以在项目中使用。本文列举了用于Vue 2和Vue 3的 15个 流行的 Vue 插件。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
- Vuetify
- NuxtJS
- Vuex
- Vuex Persisted State
- VuePress
- Vue Meta
- Vue ChartJS
- Vue Grid Layout
- Vue Draggable
- Vee-Validate
- Vue Toastification
- Vue Tour
- Swiper.js
- Vue2-Leaflet
- TroisJS
- Vue Scrollama
- Vue QR Code Reader
文章图片
教程:https://www.vuemastery.com/co...
你是否曾纠结于如何让应用在视觉上看起来更吸引人?Vuetify是一个基于Material Design的UI库,支持谷歌和Android的设计语言。
它是一个开源库,有数百个组件,从按钮, app bars,chips,modals 和更多。这些组件都是预先设计好的,非常实用,让你能够通过文档化的 props 和插槽与它们进行交互。预先定义的CSS类也可用于控制颜色、字体、网格间距、弹性框等。
NuxtJS
文章图片
Nuxt 基于一个强大的模块化架构。你可以从 50 多个模块中进行选择,让你的开发变得更快、更简单。对 PWA 的支持、添加谷歌分析到你的网页或生成网站地图,这些功能都无需重新发明轮子来获得。
NuxtJS目前基于Vue 2。但是nux3最近已经发布,并且已经完全重写以支持Vue 3。
Vuex
文章图片
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
Vuex Persisted State
文章图片
Vuex状态机制,一刷新就会重置,解决问题的方式一般都是存储起来(session/local Storage),
vuex-persistedstate
插件帮我们集成了这些功能。VuePress
文章图片
VuePress 是一款使用 Vue 驱动的静态网站生成器,是 Vue 的作者 Evan You 为了方便文档的编写而开发的。
- 默认主题与 Vue 官方文档一致
- 简洁,少配置,高性能
- Markdown 专为技术文档提供拓展
- 自带 PWA
- 自定义主题,可定制程度完全由自己决定
文章图片
地址:https://vue-meta.nuxtjs.org/
基于Vue 2.0 的 vue-meta 插件,主要用于管理HMTL头部标签,同时也支持SSR。
vue-meta有以下特点:
- 在组件内设置 metaInfo,便可轻松实现头部标签的管理
- metaInfo 的数据都是响应的,如果数据变化,头部信息会自动更新
支持 SSR
文章图片
Vue ChartJS
文章图片
地址:https://www.npmjs.com/package...
想在你的Vue应用程序中添加图表?可以看看 Chart.js。它是一个为设计师和开发者提供的简单而灵活的 JS 图表库。它有许多漂亮的图表类型可供选择。
文章图片
地址:https://jbaysolutions.github....
Vue Grid Layout 是一个类似于 Gridster 的栅格布局系统, 适用于 Vue.js,灵感来源于React Grid Layout。
特性
- 可拖拽
- 可调整大小
- 静态部件(不可拖拽、调整大小)
- 拖拽和调整大小时进行边界检查
- 增减部件时避免重建栅格
- 可序列化和还原的布局
- 自动化 RTL 支持
- 响应式
地址:https://www.npmjs.com/package...
Vue.Draggable 是一款基于
Sortable.js
实现的vue拖拽插件。支持移动设备、拖拽和选择文本、智能滚动,可以在不同列表间拖拽、不依赖 jQuery 为基础、vue2 过渡动画兼容、支持撤销操作,总之是一款非常优秀的vue拖拽组件。Vee-Validate
文章图片
地址:https://www.npmjs.com/package...
为了确保通过表单从用户那里收集正确类型的数据,有必要验证表单,以确保用户输入符合预期的模式。VeeValidate是一个可以将这一层功能添加到任何表单组件的包。
Vue Toastification
文章图片
地址:https://vue-toastification.ma...
Vue Toastification 是一个轻量、易用且美观的提示条通知组件,提供了大量的选项来支持大部分自定义选择。
Vue Tour
文章图片
地址:https://github.com/pulsardev/...
Vue Tour是轻巧、简单且可自定义的新手指引插件,可与Vue.js一起使用。它提供了一种快速简便的方法来指导用户使用您的应用程序。
Swiper.js
文章图片
地址:https://swiperjs.com/vue
Swiper.js是一个预制的旋转木马组件,可以用来在各种图片之间滑动。Swiper.js 原生支持Vue 3,提供了一个可以插入到你的项目的组件。对于Vue 2,你可以使用其他包,如vue-awesome-swiper。
vue2-leaflet
地址:https://www.npmjs.com/package...
文章图片
vue2-leaflet
是对ledflet的封装,vue项目中直接使用vue2-leaflet即可。Leaflet.js
是一个开源库,使用它可以部署交互式,简单,轻量级和简单的Web地图。TroisJS
文章图片
地址:https://troisjs.github.io/
Trois(法语为Three)是一个Vue 3库,用于
Three.JS
,这是一个流行的WebGL库。Three.JS对桌面和移动端都有良好的支持。这个库允许你使用VueJS组件为你的网站轻松创建3D内容。你可以使用这个库在你的网站上添加一个3D渲染器,并在你的VueJs文件的
部分中使用预先建立的组件指定场景细节,如材料、照明、网格、阴影等。Trois.Js 是Three.js上面的一个包装器,因此不比原始库慢。它还通过自动处置几何体、材料、纹理、渲染器等来简化对象的处置,这在原始库中是不存在的。
vue-scrollama
文章图片
地址:https://www.npmjs.com/package...
一个Vue组件,可轻松设置滚动驱动的交互(又称滚动讲演)。 在引擎盖下使用 Scrollama。
Vue QR Code Reader
文章图片
地址:https://gruhn.github.io/vue-q...
QR码(QR code)在当今世界非常普遍。Vue二维码阅读器是一个即插即用的包,允许你添加二维码扫描功能到你的应用程序。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
https://www.vuemastery.com/bl...
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。【2021,17个|2021,17个 最流行的 Vue 插件】
本文 GitHub https://github.com/qq44924588... 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
文章图片
推荐阅读
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 2021-02-10(找不回的“年味”……)
- 2021-05-05五一的五天假期结束了
- 2021/1/15|2021/1/15 数幸福
- 20210307《挑战赛怂人胆》【能量将帅挑战赛(01)】
- 2020年,告别焦虑的自己,2021年,期待满意的自己。
- 今天开心的三件事(第454天,20210125,星期一,阴)
- 《我怎样教语文》读书打卡(十九)20210317
- 华杉版资治通鉴【1154】别人家的孩子,是中国人民永远的噩梦。2021-04-03
- 2021年第四周复盘|2021年第四周复盘 | 寻找初心,再次出发