乐趣区

关于前端:VUE3-教程理工直男都是如何一步一步带妹构建插件

jiezi

作者：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.js

export default {install: (app, options) => {// TODO}
}

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

// main.js

import {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.js

import 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.js

export 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.js

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

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

// MyFirstPlugin.js
app.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.js
export 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.js

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

退出移动版