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

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

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

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

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

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

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

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

• 添加全局组件
• 添加全局指令，过渡或其资源
• 使用全局mixins添加组件选项(比如vue-router)
• 将加法属性添加到Vue实例上(通过app.config.globalproperties)

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

创建我们的Vue 3插件

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

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

• app - 由 Vue 的 createApp 生成的 app 对象
• options - 用户传入的选项

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

然后，为了将这个插件插入到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, /* 可以传递 options 作为第二个参数*/) 
10.  
11. app.mount('#app') 

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

从Vue插件添加全局组件

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

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

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

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

1. <template> 
2.     <div> 
3.         <h1 class="header-title">    
4.             <slot name="title" /> 
5.         </h1> 
6.         <h2 class="title-author"> 
7.             <slot name="author" /> 
8.         </h2> 
9.     </div> 
10. </template> 

回到 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.     } 
9. } 

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

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

1. <template> 
2.   <my-header> 
3.     <template #title>  
4.       Building Your Own Vue 3 Plugin - <i> A Full Guide </i> 
5.     </template> 
6.     <template #author>  
7.       Matt Maribojoc 
8.     </template> 
9.   </my-header> 
10. </template> 

运行结果：

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

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

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

1. <template> 
2.     <div> 
3.         <h1 class="header-title">    
4.             <slot name="title" /> 
5.         </h1> 
6.         <h2 class="title-author"> 
7.             <slot name="author" /> 
8.         </h2> 
9.     </div> 
10. </template> 
11.  
12. <style> 
13.     html, body, * { 
14.         font-size: 1.2em; 
15.         background: #fafafa; 
16.     } 
17. </style> 

运行后：

使用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.     } 
23. } 

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

1. <template> 
2.   <p v-font-size:small>Small</p> 
3.   <p v-font-size:medium>Medium</p> 
4.   <p v-font-size:large>Large</p> 
5.    
6.   <my-header> 
7.     <template #title>  
8.       Building Your Own Vue 3 Plugin - <i> A Full Guide </i> 
9.     </template> 
10.     <template #author>  
11.       Matt Maribojoc 
12.     </template> 
13.   </my-header> 
14. </template> 

运行后：

使用插件选项提供定制

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

假设我们希望开发人员能够控制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.     } 
15. } 

在我们使用的任何组件中，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.     } 
13. } 

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

1. <template> 
2.   <button @click="logout"> Logout </button> 
3.   <p v-font-size:small>Small</p> 
4.   <p v-font-size:medium>Medium</p> 
5.   <p v-font-size:large>Large</p> 
6.   <a :href="featuredLink"> Featured Link </a> 
7.   <my-header> 
8.     <template #title>  
9.       Building Your Own Vue 3 Plugin - <i> A Full Guide </i> 
10.     </template> 
11.     <template #author>  
12.       Matt Maribojoc 
13.     </template> 
14.   </my-header> 
15. </template> 
16.  
17. <script setup> 
18. import { inject } from 'vue' 
19. const logout = inject('logout') 
20. </script> 

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

总结

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

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

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

原文链接：https://www.toutiao.com/i6992356350495949350/