作者： 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... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。