如何创建一个自定义 Vue.js 插件

喜欢就关注我们吧

简介

Vue.js插件是一种向app添加全局功能的强大而简单的方法。从分发app范围的组件到向app添加附加功能，例如路由和不可变数据存储，用途非常广泛。

本文将带你学习如何构建一个Vue自定义插件。

预先准备

阅读本文需要：

熟悉设置Vue.js项目。

本教程已使用Node v16.5.0、npm v6.14.8和vue v2.6.11进行过验证。

如何构建插件

今天我们要编写的这个Vue插件，它会在每次组件挂载到DOM时让控制台输出信息。

const MyPlugin = {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};

export default MyPlugin;

Vue插件是一个带有install方法的对象，接受两个参数：

全局Vue对象
和一个包含用户定义的options的对象

Vue.mixin()用于将功能注入所有组件。在上面的例子中，mounted()方法会在组件添加到DOM时运行。

现在可以通过导入并调用Vue.use(MyPlugin)在Vue app中使用插件：

import Vue from 'vue'
import MyPlugin from './my-vue-plugin.js'
import App from './App.vue'

Vue.use(MyPlugin)

new Vue({
  el: '#app',
  render: h => h(App)
});

你可能会问，为什么不通过在main.js中调用Vue.mixin()来使用插件呢？原因是，由于我们向Vue添加了不直接修改app的全局功能，因此最好将其拆分为可以随意添加或删除的单独模块。这样还使得插件容易分发。

添加功能

添加组件生命周期钩子或属性

如上面示例中所述，你可以使用Mixin添加生命周期钩子并对Vue组件进行其他修改。

注意：Mixin超出了本文的范围。目前普遍接受的定义是：本质上是组合到其他组件的组件。

const MyPlugin = {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.mixin({
      mounted() {
        console.log('Mounted!');
      }
    });
  }
};

export default MyPlugin;

安装app范围的组件和指令

如果你希望打包组件或指令以作为插件分发，可以编写如下内容：

import MyComponent from './components/MyComponent.vue'
import MyDirective from './directives/MyDirective.js'

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.component(MyComponent.name, MyComponent)
    Vue.directive(MyDirective.name, MyDirective)
  }
};

export default MyPlugin;

修改全局Vue对象

可以修改插件的全局Vue对象：

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.myAddedMethod = function() {
      return Vue.myAddedProperty
    }
  }
};

export default MyPlugin;

修改Vue实例

要在没有任何注入机制的情况下直接向组件实例添加属性或方法，可以修改Vue.prototype，如下所示：

const MyPlugin {
  // eslint-disable-next-line no-unused-vars
  install(Vue, options) {
    Vue.prototype.$myAddedProperty = 'Example Property'
    Vue.prototype.$myAddedMethod = function() {
      return this.$myAddedProperty
    }
  }
};

export default MyPlugin;

这些属性将添加到所有组件和Vue实例中。

注意：在Vue社区中，修改Vue.prototype的插件在添加的属性前通常会加上美元符号($)。

支持自动安装

当其他人在模块系统之外使用插件时，如果插件包含在Vue脚本标记之后，则通常希望能够自动安装而不需要调用Vue.use()。可以通过将下面这些代码行附加到my-vue-plugin.js的末尾来实现：

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(MyPlugin)
}

如果Vue已添加到全局范围，则自动安装。

分发插件

编写完插件后，你可以将其分发到社区。步骤如下：

将源代码和可分发文件发布到npm和GitHub。确保为代码选择合适的许可证！
向官方Vue cool-stuff-discovery存储库打开pull请求：awesome-vue。
（可选步骤）在Vue论坛、Vue Gitter频道和Twitter上发布主题标签#vuejs。

来试着自己制作一个Vue插件吧！

感谢大家的阅读！

每日分享前端插件干货，欢迎关注！

点赞和在看就是最大的支持❤️

原文始发于微信公众号（前端新世界）：如何创建一个自定义 Vue.js 插件

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/28945.html