广州蓝景分享7个前端开发实用的Vue3插件和库

　　想要在2023年构建出色的Vue。js应用程序吗？如果你的回答是YES，那么一定要试一试这篇文章整理的7个Vue3插件和库。无需编写大量代码，这些令人难以置信的插件和库就可以为应用程序添加超棒的特性和功能。
　　今天小蓝就跟大家分享：这些插件和库，囊括动画、身份验证、性能优化等各个方面，所以如果你想用Vue3创建令人惊叹的webapp，可千万不要错过哦！
　　1。Vuetify
　　插件地址：https：vuetifyjs。comen
　　Vuetify是一个强大而灵活的Vue。jsUI库，可以帮助为web应用程序构建美观且响应迅速的用户界面。Vuetify提供了一系列预构建的UI组件和样式，可在构建Vue。js应用时节省我们的时间和精力。
　　有了Vuetify，你就可以轻松创建响应式布局、排版、图标、按钮、表单、表格和许多其他UI元素，而无需从头开始编写所有CSS和HTML。该库还包括指令、主题自定义、国际化和可访问性等高级功能，可帮助创建更具交互性、包容性和用户友好的web应用程序。
　　安装createnewVue。jsProjectwithVuetifyyarncreatevuetifyaddtoanexistingVue。jsprojectyarnaddvuetify3。1。5
　　用法import｛createApp｝fromvueimportAppfrom。App。vueVuetifyimportvuetifystylesimport｛createVuetify｝fromvuetifyconstvuetifycreateVuetify（｛components，directives，｝）createApp（App）。use（vuetify）。mount（app）
　　在项目中设置完Vuetify之后，让我们在应用程序中添加一些基本的Vuetify组件。
　　首先将以下代码添加到main。js或main。ts文件中importascomponentsfromvuetifycomponents
　　现在可以在自己的组件中使用Vuetify组件了buttonvbtnButtonvbtnanautocompleteextendsaselectinputwithautocompletefeaturesvautocompletelabelAutocomplete：items〔California，Colorado，Florida，Georgia，Texas，Wyoming〕vautocomplete
　　你也可以用Vuetify将指令附加到组件上。让我们将以下代码块也附加到main。js或main。ts文件中：importasdirectivesfromvuetifydirectives
　　现在我们来尝试一些指令：
　　vintersect指令利用IntersectionObserverAPI。它提供了一个易于使用的界面，用于检测元素何时在用户视口中可见。vintersectvcardvintersectonIntersectclassmxautomaxwidth336vcardtitleCardtitlevcardtitlevcardtextThisisthecardssubtextvcardtextvcard。。。
　　vclickout指令在单击目标元素之外的内容时调用函数。用于vmenu（Vuetify菜单组件）和vdialog（Vuetify对话框组件）等组件内部。templatevappvcardvclickoutsideonClickOutside：coloractive？primary：undefined：darkactiveclassmxautoheight256roundedxlwidth256clickactivetrue｛｛active？ClickOutside：ClickMe｝｝vcardvapptemplate
　　2。VueUse
　　插件地址：https：vueuse。org
　　VueUse提供了200个基本实用程序函数的集合，用于与浏览器、状态、网络、动画、时间等各种API进行交互，这些函数可以轻松导入并在Vue。js组件中使用。因此，无需编写太多代码就可以添加访问本地存储、使用全屏、单击元素外部等功能。只需组合导入，即可使用。
　　安装npmivueusecore
　　用法reactivelocalStorage
　　上面的代码提供了一种在浏览器的localStorage或sessionStorage中存储数据的响应式方法。因此可以实时查看本地存储和会话存储中的更新数据。createadraggableelementtemplateDragme！Iamat｛｛x｝｝，｛｛y｝｝template
　　上面的代码使el元素可拖动，并且还提供有关元素移动时x轴和y轴屏幕位置的实时信息。
　　Detectsthatatargetelementsvisibility。h1Helloworldh1
　　上面的代码中，当链接的元素在屏幕上可见时会触发事件。这是一项非常简便的技术，用于创建一个动画触发器。
　　VueUse中有很多组合用法，如果你感兴趣，也可以更深入地研究这方面的知识。
　　3。vuetoastnotification
　　插件地址：https：github。comankurk91vuetoastnotification
　　向用户显示通知的重要性众所周知。通知向用户提供有关其操作成功或失败的即时反馈，使用户体验更加直观。
　　vuetoastnotification插件简化了在Vue。js应用中显示通知的过程。它提供了一个易于使用且高度可定制的通知系统，可以快速集成到项目中。
　　安装npminstallvuetoastnotification3。0
　　用法import｛createApp｝fromvue；importToastPluginfromvuetoastnotification；Importoneoftheavailablethemesimportvuetoastnotificationdistthemedefault。css；importvuetoastnotificationdistthemesugar。css；constappcreateApp（｛｝）；app。use（ToastPlugin）；app。mount（app）；letinstanceapp。toast。open（Youdidit！）；Forcedismissspecifictoastinstance。dismiss（）；Dismissallopenedtoastimmediatelyapp。toast。clear（）；app。toast。open（Howdy！）；CanacceptanObjectofoptionsapp。toast。open（｛message：Somethingwentwrong！，type：error，allofotheroptionsmaygohere｝）；
　　4。Formkit
　　插件地址：https：formkit。com
　　表单是web应用的关键部分，用于捕获用户输入和启用交互。表单可以是简单的，也可以是复杂的，用于注册、数据收集和电子商务等任务。表单可改善用户体验和系统功能，并且可以针对验证、错误处理和样式进行自定义。但众所周知，表单处理起来是有难度的，尤其是当它们变得越来越复杂时。FormKit提供了一组实用程序，使我们能够轻松地在Vue。js应用程序中构建和管理表单，可操作范围包括从简单的输入验证到诸如条件逻辑和动态表单字段等高级功能。
　　安装npminstallformkitvue
　　用法
　　应用程序中的formkit用例并不少，我们先从一个示例开始。首先在Vue3应用程序中设置Formkit。import｛createApp｝fromvueimport｛plugin，defaultConfig｝fromformkitvueimportAppfromApp。vuecreateApp（App）。use（plugin，defaultConfig）。mount（app）
　　将FormKit导入到全局的Vue。jsapp之后，我们就可以在模板中使用了。例如FormKittyperepeaterlabelMyMoviesaddlabelAddMovieFormKitnamemovietypeautocompletelabelSearchforamovieplaceholderEx：Interstellar：optionssearchMoviesFormKittyperatinglabelMyratingFormKit
　　这是一个关于如何使用Formkit的简单示例。Formkit是一个非常强大的平台。如果你对使用FormKit构建强大的表单感兴趣，那么尝试Formkit一定不会让你失望。
　　5。Vuedraggable
　　插件地址：https：github。comSortableJSvue。draggable。next
　　将拖放功能添加到Vue。js应用可以改善用户体验。因为拖放功能允许用户以更直观的方式与应用程序交互，所以用户可以更轻松地组织和操作数据。Vuedraggable是实现拖放功能的绝佳工具，因为它简化了流程，即使是刚接触Vue。js的开发人员也可以轻松使用。将这个插件添加到Vue。js应用程序，你就可以创建更具吸引力和动态的用户体验，提高用户回头率。
　　安装yarnyarnaddvuedraggablenextnpmnpmiSvuedraggablenext
　　用法
　　让我们用Vuedraggable创建一个简单的可排序列表。templatedraggablevmodelcarsstartdragtrueenddragfalseitemkeyidtemplateitem｛element｝｛｛element｝｝templatedraggabletemplate
　　6。VueFire
　　插件地址：https：vuefire。vuejs。org
　　Firebase是一个后端即服务（BaaS）平台，为开发人员提供各种工具和服务，用于构建和部署全栈应用。有了Firebase，你就可以通过最少的JavaScript代码来实现许多Vue。js应用程序的后端功能。但是，将Firebase数据库添加到应用程序中可能会有一定的压力。Vuefire是一个非常有帮助且轻量级的包装器，可轻松地将数据与Firebase数据库保持同步。它消除了手动操作的麻烦，并具有一些漂亮的内置逻辑，可以帮助完成困难的工作。
　　安装yarnyarnaddvuefirefirebasenpmnpminstallvuefirefirebase
　　用法
　　在使用VueFire之前，确保拥有Firebase帐户和项目设置。请记住，有两种不同的数据库：Database和Firestore假设，我们想通过Firebase创建一个todoVue。js应用程序。那么需要设置firestore数据库。
　　首先我们在Firebase上创建一个项目来获取应用程序凭据。
　　随着项目启动和运行，现在可以设置firestore数据库了。
　　创建名为todos的第一个集合。
　　设置完FirebaseFirsestoreCollection之后，就可以使用Vuefire了。import｛initializeApp｝fromfirebaseappimport｛getFirestore，collection｝fromfirebasefirestore。。。otherfirebaseimportsexportconstfirebaseAppinitializeApp（｛yourapplicationsettingsfromFirebase｝）usedforthefirestorerefsconstdbgetFirestore（firebaseApp）herewecanexportreusabledatabasereferencesexportconsttodosRefcollection（db，todos）templateullivfortodointodos：keytodo。idspan｛｛todo。text｝｝spanliultemplate
　　7。vue3googlesignin
　　插件地址：https：vue3googlesignin。syetalabs。io
　　身份验证是任何应用程序处理敏感数据的一个重要方面。无论是银行app还是社交媒体平台，用户都希望确保他们的信息是安全的。在国外，Google登录是常用的身份验证机制，允许用户使用其Google凭证登录应用，这样做不但可以节省时间，还能提供更无缝的用户体验。
　　对于在Vue3项目中实现GoogleSignIn，vue3googlesignin就是一种简单且可自定义的实现方式。从显示Google登录按钮到获取和管理用户身份验证令牌，vue3googlesignin将处理整个身份验证流程，因此细节方面无需费心。
　　安装npmnpminstallSvue3googlesigninyarnyarnaddvue3googlesigninpnpmpnpmaddvue3googlesignin
　　很好，然后我们可以使用用户的谷歌帐户凭据在应用程序中对用户进行身份验证。
　　用法
　　设置库轻而易举。你所需要做的就是将以下代码添加到应用程序的入口点（main。js或main。ts）。importGoogleSignInPluginfromvue3googlesigninapp。use（GoogleSignInPlugin，｛clientId：CLIENTIDOBTAINEDFROMGOOGLEAPICONSOLE，｝）；otherconfigapp。mount（app）；
　　就是这样！现在让我们谷歌登录应用程序。我们可以使用以下代码将谷歌登录按钮添加到组件：templateGoogleSignInButtonsuccesshandleLoginSuccesserrorhandleLoginErrorGoogleSignInButtontemplate
　　还可以试试Google新的OneTap身份验证，如果对话框的可见性仅限于用户登录应用程序，则在侧面显示一个小对话框或弹出窗口。import｛useOneTap，typeCredentialResponse｝fromvue3googlesignin；useOneTap（｛onSuccess：（response：CredentialResponse）｛console。log（Success：，response）；｝，onError：（）console。error（ErrorwithOneTapLogin），options｝）；
　　总结
　　最后，Vue3是一个强大的JavaScript框架，我们能够创建令人难以置信的用户界面和应用程序。借助本文中提到的插件和库，我们可以简化工作流程并在更短的时间获得更佳的结果。