如何编写Vue插件

什么是插件

在Vue框架中,如果需要给Vue增加一些我们需要的功能,Vue给我留了一个插件的方式,我们可以编写自己的插件,然后在Vue中去注册插件,然后去使用他。

通过Vue插件我们可以实现一些Vue框架没有的功能,也可以使用别人写好的插件,来帮助我们更快速的实现一些功能。

插件的功能范围并没有严格的要求,根据官方的示例来说,一般有下面几种:

添加全局方法或者属性,如:vue-custom-element,我们可以用插件方式添加一些全局组件,然后可以在任何页面或者组件当中去使用它。这也是Element UI或者Ant Design组件库安装组件的方式。

添加全局资源:指令/过渡等。如:vue-touch,我们也可以用插件方式去添加一些全局的自定义指令,来实现我们的功能。

通过全局 mixin 来添加一些组件选项。(如vue-router)

添加全局实例方法,通过把它们添加到 config.globalProperties 上实现。比如常见我们可能会把$http请求放在全局实例方法上,方便我们在任何页面或者组件中去使用,不再需要去显式的import引入它。

一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router、vuex等。

编写插件

编写Vue插件其实很简单,一个插件其实就是一个对象,或者是一个函数,如果是对象的话,那么就会调用对象里的 install 方法,如果是函数就会调用这个函数。无论是调用对象的 install 方法还是调用函数的方式,它们都会收到两个参数:1是由 Vue 的 createApp 生成的 app 对象,2是用户传入的参数。

下面我们从最简单的一个i18n功能开始。

一般我们都会把插件放在plugins文件夹下,这样易于维护和管理

我们创建一个i18n.js文件

export default {

  install: (app, options) => {

    // 编写插件代码

  }

}


比如我们需要一个全局的函数来翻译整个程序,我们可以将方法挂在app.config.globalProperties属性上,来暴露出来。

函数接收一个key字符串,我们将使用它在用户提供的参数对象中查找转换后的字符串。

// plugins/i18n.js

export default {

  install: (app, options) => {

    app.config.globalProperties.$translate = key => {

      return key.split('.').reduce((o, i) => {

        if (o) return o[i]

      }, options)

    }

  }

}


假设用户使用插件时,将在 options 参数中传递一个包含翻译后的键的对象。我们的 $translate 函数将使用诸如 greetings.hello 之类的字符串,这样查找到的值将会为 Bonjour!。

例如:

greetings: {

  hello: 'Bonjour!'

}


我们还可以使用inject来提供功能或者属性,比如,我们可以允许应用程序访问 options 参数以能够使用在安装插件时传入的参数对象。

// plugins/i18n.js

export default {

  install: (app, options) => {

    app.config.globalProperties.$translate = key => {

      return key.split('.').reduce((o, i) => {

        if (o) return o[i]

      }, options)

    }

    app.provide('i18n', options)

  }

}


现在我们就可以使用 inject[i18n] 注入到一些页面或者组件中来访问该对象。

因为,Vue给我提供了app对象作为插件的第一个参数,所以插件可以使用所有其他功能,例如使用 mixin 和 directive。要了解有关 createApp 和应用程序实例的更多信息,请查看 Application API 文档。

比如下面我们在插件内,又注册了新的自定义指令,还有全局的mixin方法:

// plugins/i18n.js

export default {

  install: (app, options) => {

    app.config.globalProperties.$translate = (key) => {

      return key.split('.')

        .reduce((o, i) => { if (o) return o[i] }, options)

    }

    app.provide('i18n', options)

    app.directive('my-directive', {

      mounted (el, binding, vnode, oldVnode) {

        // some logic ...

      }

      //...

    })

    app.mixin({

      created() {

        // some logic ...

      }

      //...

    })

  }

}


使用插件

上面我们编写完插件后,我们就可以去使用插件了。在Vue中使用插件也是非常简单,我们可以通过使用 use() 方法将插件添加到我们的应用中。

use() 方法有两个参数。第一个是要安装的插件。

第二个参数是可选的,我们可以传一些自定义参数给插件。

// main.js

import { createApp } from 'vue'

import Root from './App.vue'

import i18nPlugin from './plugins/i18n'

const app = createApp(Root)

const i18nStrings = {

  greetings: {

    hi: 'Hallo!'

  }

}

app.use(i18nPlugin, i18nStrings)

app.mount('#app')


最后我们在页面中使用这个插件:

<template>

  <h1>{{ $translate("greetings.hi") }}</h1>

  <div>i18n插件示例</div>

</template>


最终显示:

此示例在线代码:https://codesandbox.io/s/vue3-i18n-plugins-pbcb0

最后

参考: Vue 插件-官方文档:https://v3.cn.vuejs.org/guide/plugins.html

原文链接:https://blog.csdn.net/cmdfas/article/details/121412838

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,185评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,445评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,684评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,564评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,681评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,874评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,025评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,761评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,217评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,351评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,988评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2 349

推荐阅读更多精彩内容