文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3 教程:理工直男都是如何一步一步带妹构建插件?

2024-12-03 00:28

关注

插件是为Vue应用添加可重用功能的好方法。有了大量用于组件、路由等的现有插件,Vue的生态系统为许多常见的用例提供了解决方案。

一些常用插件有vue-router、vue custom-element 和 vue-touch。

然而,总会有时候,没有一个插件能满足我们的需求时,我们就需要自己写个插件满足产品的口味。

在本教程中,我们来学习构建自己的Vue 3插件。

我们可以用 Vue 插件做什么?

简单地说,Vue插件允许我们将任何类型的功能提取到其自身包含的代码中,这些代码可以在不同的项目中重用。

通常,它们被用于向Vue应用程序添加全局级别的功能。根据Vue文档,以下是一些插件最常见的用法。

接下来我们会一个一个的讲,首先先来创建我们第一个插件。

创建我们的Vue 3插件

在本教程中,我们将制作一个插件,该插件添加了允许我们将UI元素和样式添加到我们的应用程序中。

我们创建一个名为MyPlugin.js的文件,并在其中创建一个带有install方法的export default。这个方法有两个参数:

  1. // MyFirstPlugin.js 
  2.  
  3. export default { 
  4.     install: (app, options) => { 
  5.       // TODO 
  6.     } 

然后,为了将这个插件插入到Vue应用中,进入main.js文件并使用app.use()。

  1. // main.js 
  2.  
  3. import { createApp } from 'vue' 
  4. import App from './App.vue' 
  5. import MyFirstPlugin from './plugin' 
  6.  
  7. const app = createApp(App) 
  8.  
  9. app.use(MyFirstPlugin, ) 
  10.  
  11. app.mount('#app'

这要,我们就做好的初步的工作。

从Vue插件添加全局组件

Vue插件的一个重要用途是添加可以在 Vue项目中的任何地方使用的全局组件,而不必每次都要导入。

使用app参数,我们可以使用app.component语法声明全局组件。

通过使用app.component,我们可以使用单文件组件或直接在 js 文件中声明我们的组件。

假设我们想创建一个组件(MyHeader.vue)--它包含了一篇文章的信息。

  1.  

回到 MyFirstPlugin.js,将它添加到我们的插件中。

  1. // MyFirstPlugin.js 
  2.  
  3. import MyHeader from './components/MyHeader.vue' 
  4. export default { 
  5.     install: (app, options) => { 
  6.                
  7.         app.component('my-header', MyHeader) 
  8.     } 

现在,我们可以在任何地方使用MyHeader,因为它是全局注册的。

例如, 在 App.vue 中使用。不需要导入,只需将其添加到模板中。

  1.  
  2.       
  3.       Matt Maribojoc 
  4.      
  5.    
  6.  

运行结果:


我们还可以在这些组件中添加样式

如果我们向组件添加任何非作用域样式,直接在组件内设置即可。

例如,如果我们想改变整个项目的字体大小和背景颜色,我们可以在MyHeader组件中实现。

  1.  
  2.  
  3.  

运行后:

使用Vue插件添加全局指令

我使用Vue中最喜欢的一点是能够创建自己的指令。

指令是Vue允许开发人员直接编辑DOM的一种方式。例如v-if、v-show、v-bind等等。

而通过插件,我们可以很容易地使用app.directive创建指令,并在多个项目中使用。

简而言之,我们希望接受一个指令参数,确定元素的字体大小,然后更改该元素的样式(通过el)来使用适当的大小。

  1. // MyFirstPlugin.js 
  2.  
  3. export default { 
  4.     install: (app, options) => { 
  5.         app.component('my-header', MyHeader) 
  6.     
  7.         app.directive("font-size", (el, binding, vnode) => { 
  8.             var size = 16; 
  9.             switch (binding.arg) { 
  10.               case "small"
  11.                 size = 12; 
  12.                 break; 
  13.               case "large"
  14.                 size = 24; 
  15.                 break; 
  16.               default
  17.                 size = 18; 
  18.                 break; 
  19.             } 
  20.             el.style.fontSize = size + "px"
  21.           }) 
  22.     } 

然后,在App.vue或任何组件内部,因为它是全局可用的,我们可以像这样使用指令。

  1.  
  2.       
  3.       Matt Maribojoc 
  4.      
  5.    
  6.  

运行后:


使用插件选项提供定制

给插件添加选项是一个很好的方法,可以使插件在不同的使用情况下更加灵活。

假设我们希望开发人员能够控制small、medium、large参数的确切大小。

回到main.js,我们可以向app.use函数添加第二个参数:

  1. // main.js 
  2.  
  3. app.use(MyFirstPlugin, { 
  4.    fontSize: { 
  5.        small: 12, 
  6.        medium: 24, 
  7.        large: 36 
  8.    } 
  9. }) 

 然后,回到我们的插件中,我们可以使用options对象来提取传递给插件的任何内容,而不是硬编码我们的字体大小。

  1. // MyFirstPlugin.js 
  2. app.directive("font-size", (el, binding, vnode) => { 
  3.   var size = 16; 
  4.   switch (binding.arg) { 
  5.     case "small"
  6.       size = options.fontSize.small; 
  7.       break; 
  8.     case "large"
  9.       size = options.fontSize.large; 
  10.       break; 
  11.     default
  12.       size = options.fontSize.medium; 
  13.       break; 
  14.   } 
  15.   el.style.fontSize = size + "px"
  16. }); 

运行后:


使用 Mixins 添加方法、数据和其他组件选项

插件向Vue应用程序添加可重用功能的一种常见方式是使用Vue mixins。Mixins 是一种向Vue组件添加组件选项的方法。

我们可以添加任何组件选项,如生命周期钩子、数据和方法,如果一个组件使用了这个mixin,这些选项将与该组件的选项合并。

理解如何合并这些选项是很重要的。例如,mixin 生命周期钩子将在组件钩子之前被调用,并且如果有命名冲突,组件数据将优先于mixin数据。

我们可以使用app.mixin方法创建一个全局的mixin。

比方说,我们想添加一个创建的钩子,它只是向我们的控制台打印一个日志语句,并想给一个数据属性,它给出了一个外部URL,我们可以用它来改变整个应用程序中链接的href属性。

  1. // MyFirstPlugin.js 
  2. export default { 
  3.     install: (app, options) => { 
  4.         app.mixin({ 
  5.             data() { 
  6.                 return { 
  7.                     featuredLink: 'https://learnvue.co' 
  8.                 } 
  9.             }, 
  10.             created() { 
  11.                 console.log("Printing from created."
  12.             }, 
  13.         }) 
  14.     } 

在我们使用的任何组件中,created钩子将运行,我们可以访问我featuredLink 属性。两个打印 - 一个用于app.vue和一个用于myheader.vue


在插件中使用 Provide 和 Inject

让特定组件访问不同属性和方法的一种强大方法是使用Vue中的 provide和inject模式。

这允许我们的插件 "provide"一个属性或方法,并允许任何组件 "inject" 这个值。

来看看一个例子,我们创建一个logout 方法。我们不需要这个方法对每一个组件都可用,但我们想只创建一个logout 方法,这样将来修改起来就更容易。

在我们的插件内部,我们声明我们的方法并调用app.provide来将它提供给我们的应用的其他部分。

  1. // MyFirstPlugin.js 
  2.  
  3. import { provide } from 'vue' 
  4.  
  5. export default { 
  6.     install: (app, options) => { 
  7.         const logout = () => { 
  8.             console.log('Logout is being called'
  9.         } 
  10.  
  11.         app.provide('logout', logout) 
  12.     } 

然后,在任何组件中,我们都可以注入这个方法,并创建一个调用logout方法的按钮。

  1.  
  2.       
  3.       Matt Maribojoc 
  4.      
  5.    
  6.  
  7.  
  8.  
  9. import { inject } from 'vue' 
  10. const logout = inject('logout'
  11.  

运行后会看到,每当我们点击按钮,logout里面内容就会被打印出来。

总结

设计你自己的Vue 3插件的可能性是无限的。希望本文能对你有所帮助。

~完,我是小智,整理这篇文章时,正在生病中,准备去会所嫩模放松一下。

作者:Shadeed 译者:前端小智 来源:learnvue 原文:https://learue.co/2021/06/building-your-own-vue-3-plugin-a-full-guide/

 

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯