作者:John Lim
译者:前端小智
起源:vuemastery
有幻想,有干货,微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
Vue 被一个衰弱的插件和包的生态系统所增强,使开发变得牢靠、疾速和简略。因为 Vue 是一个国内开发者社区所抉择的框架,所以有一个一直增长的插件和包库,你能够在我的项目中应用。本文列举了用于 Vue 2 和 Vue 3 的 15 个 风行的 Vue 插件。
- 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
Vuetify
教程: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
- 自定义主题,可定制水平齐全由本人决定
Vue Meta
地址: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 反对
- 响应式
Vue Draggable
地址: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 文件的 <template>
局部中应用事后建设的组件指定场景细节,如资料、照明、网格、暗影等。
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…
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。