一篇文章告诉你如何编写Vue插件

 更新时间:2021年11月19日 15:23:59   作者:小帅的编程笔记  
这篇文章主要为大家介绍了如何编写Vue插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助

什么是插件

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

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

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

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

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

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

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

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

编写插件

编写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>

最终显示:

image-20211118233316846

总结

参考:https://v3.cn.vuejs.org/guide/plugins.html

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • vue中@click和@click.native.prevent的区别

    vue中@click和@click.native.prevent的区别

    这篇文章主要介绍了vue中@click和@click.native.prevent的区别,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue2中如何自定义组件的v-model

    vue2中如何自定义组件的v-model

    这篇文章主要介绍了vue2中如何自定义组件的v-model,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue组件简易模拟实现购物车

    Vue组件简易模拟实现购物车

    这篇文章主要为大家详细介绍了Vue组件简易模拟实现购物车,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 如何管理Vue中的缓存页面

    如何管理Vue中的缓存页面

    这篇文章主要介绍了如何管理Vue中的缓存页面,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • vue 3.0 使用ref获取dom元素的示例

    vue 3.0 使用ref获取dom元素的示例

    这篇文章主要介绍了vue 3.0 使用ref获取dom元素,包括vue2.x获取dom和vue3.0获取单个dom,通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-08-08
  • element表格行列拖拽的实现示例

    element表格行列拖拽的实现示例

    本文主要介绍了element表格行列拖拽的实现示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Vue两个通信方式与动画过度及混入使用介绍

    Vue两个通信方式与动画过度及混入使用介绍

    最近在写vue的一个项目要实现过渡的效果,虽然vue动画不是强项,库也多,但是基本的坑还是得踩扎实,下面这篇文章主要给大家介绍了关于Vue中实现过渡动画效果的相关资料,需要的朋友可以参考下
    2023-03-03
  • 可控制缓存销毁的 keepAlive 组件实现详解

    可控制缓存销毁的 keepAlive 组件实现详解

    这篇文章主要为大家介绍了可控制缓存销毁的 keepAlive 组件实现详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10
  • vue3中使用pinia(大菠萝)状态管理仓库的项目实践

    vue3中使用pinia(大菠萝)状态管理仓库的项目实践

    本文主要介绍了vue3中使用pinia(大菠萝)状态管理仓库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • Vue使用vue-cli创建项目

    Vue使用vue-cli创建项目

    这篇文章主要介绍了Vue使用vue-cli创建项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论