作者：Shadeed
译者：前端小智
起源：learnvue

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

插件是为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 - 用户传入的选项
// MyFirstPlugin.jsexport default {    install: (app, options) => {      // TODO    }}

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

// main.jsimport { createApp } from 'vue'import App from './App.vue'import MyFirstPlugin from './plugin'const app = createApp(App)app.use(MyFirstPlugin, /* 能够传递 options 作为第二个参数*/)app.mount('#app')

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

从Vue插件增加全局组件

Vue插件的一个重要用处是增加能够在 Vue我的项目中的任何中央应用的全局组件，而不用每次都要导入。

应用app参数，咱们能够应用app.component语法申明全局组件。

通过应用app.component，咱们能够应用单文件组件或间接在 js 文件中申明咱们的组件。

假如咱们想创立一个题目组件(MyHeader.vue)--它蕴含了一篇文章的信息。

<template>    <div>        <h1 class="header-title">               <slot name="title" />        </h1>        <h2 class="title-author">            <slot name="author" />        </h2>    </div></template>

回到 MyFirstPlugin.js，将它增加到咱们的插件中。

// MyFirstPlugin.jsimport MyHeader from './components/MyHeader.vue'export default {    install: (app, options) => {        /* 申明全局组件 */              app.component('my-header', MyHeader)    }}

当初，咱们能够在任何中央应用MyHeader，因为它是全局注册的。

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

<template>  <my-header>    <template #title>       Building Your Own Vue 3 Plugin - <i> A Full Guide </i>    </template>    <template #author>       Matt Maribojoc    </template>  </my-header></template>

运行后果：

咱们还能够在这些组件中增加款式

如果咱们向组件增加任何非作用域款式，间接在组件内设置即可。

例如，如果咱们想扭转整个我的项目的字体大小和背景色彩，咱们能够在MyHeader组件中实现。

<template>    <div>        <h1 class="header-title">               <slot name="title" />        </h1>        <h2 class="title-author">            <slot name="author" />        </h2>    </div></template><style>    html, body, * {        font-size: 1.2em;        background: #fafafa;    }</style>

运行后：

应用Vue插件增加全局指令

我应用Vue中最喜爱的一点是可能创立本人的指令。

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

而通过插件，咱们能够很容易地应用app.directive创立指令，并在多个我的项目中应用。

简而言之，咱们心愿承受一个指令参数，确定元素的字体大小，而后更改该元素的款式（通过el）来应用适当的大小。

// MyFirstPlugin.jsexport default {    install: (app, options) => {        app.component('my-header', MyHeader)           app.directive("font-size", (el, binding, vnode) => {            var size = 16;            switch (binding.arg) {              case "small":                size = 12;                break;              case "large":                size = 24;                break;              default:                size = 18;                break;            }            el.style.fontSize = size + "px";          })    }}

而后，在App.vue或任何组件外部，因为它是全局可用的，咱们能够像这样应用指令。

<template>  <p v-font-size:small>Small</p>  <p v-font-size:medium>Medium</p>  <p v-font-size:large>Large</p>    <my-header>    <template #title>       Building Your Own Vue 3 Plugin - <i> A Full Guide </i>    </template>    <template #author>       Matt Maribojoc    </template>  </my-header></template>

运行后：

应用插件选项提供定制

给插件增加选项是一个很好的办法，能够使插件在不同的应用状况下更加灵便。

假如咱们心愿开发人员可能管制small、medium、large参数的确切大小。

回到main.js，咱们能够向app.use函数增加第二个参数:

// main.jsapp.use(MyFirstPlugin, {   fontSize: {       small: 12,       medium: 24,       large: 36   }})

而后，回到咱们的插件中，咱们能够应用options对象来提取传递给插件的任何内容，而不是硬编码咱们的字体大小。

// MyFirstPlugin.jsapp.directive("font-size", (el, binding, vnode) => {  var size = 16;  switch (binding.arg) {    case "small":      size = options.fontSize.small;      break;    case "large":      size = options.fontSize.large;      break;    default:      size = options.fontSize.medium;      break;  }  el.style.fontSize = size + "px";});

运行后:

应用 Mixins 增加办法、数据和其余组件选项

插件向Vue应用程序增加可重用性能的一种常见形式是应用Vue mixins。Mixins 是一种向Vue组件增加组件选项的办法。

咱们能够增加任何组件选项，如生命周期钩子、数据和办法，如果一个组件应用了这个mixin，这些选项将与该组件的选项合并。

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

咱们能够应用app.mixin办法创立一个全局的mixin。

比方说，咱们想增加一个创立的钩子，它只是向咱们的控制台打印一个日志语句，并想给一个数据属性，它给出了一个内部URL，咱们能够用它来扭转整个应用程序中链接的href属性。

// MyFirstPlugin.jsexport default {    install: (app, options) => {        app.mixin({            data() {                return {                    featuredLink: 'https://learnvue.co'                }            },            created() {                console.log("Printing from created.")            },        })    }}

在咱们应用的任何组件中，created钩子将运行，咱们能够拜访我featuredLink 属性。 两个打印 - 一个用于app.vue和一个用于myheader.vue

在插件中应用 Provide 和 Inject

让特定组件拜访不同属性和办法的一种弱小办法是应用Vue中的 provide和inject模式。

这容许咱们的插件 "provide"一个属性或办法，并容许任何组件 "inject" 这个值。

来看看一个例子，咱们创立一个logout 办法。咱们不须要这个办法对每一个组件都可用，但咱们想只创立一个logout 办法，这样未来批改起来就更容易。

在咱们的插件外部，咱们申明咱们的办法并调用app.provide来将它提供给咱们的利用的其余局部。

// MyFirstPlugin.jsimport { provide } from 'vue'export default {    install: (app, options) => {        const logout = () => {            console.log('Logout is being called')        }        app.provide('logout', logout)    }}

而后，在任何组件中，咱们都能够注入这个办法，并创立一个调用logout办法的按钮。

<template>  <button @click="logout"> Logout </button>  <p v-font-size:small>Small</p>  <p v-font-size:medium>Medium</p>  <p v-font-size:large>Large</p>  <a :href="featuredLink"> Featured Link </a>  <my-header>    <template #title>       Building Your Own Vue 3 Plugin - <i> A Full Guide </i>    </template>    <template #author>       Matt Maribojoc    </template>  </my-header></template><script setup>import { inject } from 'vue'const logout = inject('logout')</script>

运行后会看到，每当咱们点击按钮，logout外面内容就会被打印进去。

总结

设计你本人的Vue 3插件的可能性是有限的。心愿本文能对你有所帮忙。

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

代码部署后可能存在的BUG没法实时晓得，预先为了解决这些BUG，花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

原文：https://learue.co/2021/06/bui...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。