纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

编写Vue插件 一篇文章告诉你怎样编写Vue插件

小帅的编程笔记   2021-11-19 我要评论
想了解一篇文章告诉你怎样编写Vue插件的相关内容吗小帅的编程笔记在本文为您仔细讲解编写Vue插件的相关知识和一些Code实例欢迎阅读和指正我们先划重点:编写Vue,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 Token的失效处理 VUE Token的失效处理详解

    想了解VUE Token的失效处理详解的相关内容吗RxinY924在本文为您仔细讲解VUE Token的失效处理的相关知识和一些Code实例欢迎阅读和指正我们先划重点:VUE,Token,Token失效处理下面大家一起来学习吧..
  • Python位图分割 Python实现位图分割的效果

    想了解Python实现位图分割的效果的相关内容吗小斌斌_Plus在本文为您仔细讲解Python位图分割的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python位图,Python位图分割下面大家一起来学习吧..

网友评论

Copyright 2020 www.fresh-weather.com 【世纪下载站】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式