创建第一个VueJS插件

随着VueJS的流行，社区创建的VueJS插件变得越来越普遍和强大。

实际上，我发现有些插件非常有用。 例如，有许多很棒的UI库和实用程序插件为我节省了很多开发时间。

尽管创建自己的插件似乎是一项艰巨的任务，但实际上也没那么难。 在本教程结束时，您将

• 创建了您的第一个VueJS插件。
• 明白它们如何工作。
• 学习到工具，方法来构建更复杂的插件。

现在开始了！

如何设置插件

从广义上讲，我们的插件只是一个公开.install方法的Javascript模块。 该方法有两个参数

1. Vue构造函数
2. 选项的对象

让我们动手吧！

在我们的Vue项目中，在src / plugins创建一个新文件夹。

然后，在新文件夹中，我们可以创建我们的插件文件。 将其命名为first-plugin.js

在新插件文件中，我们应该遵循典型的ES6模块模式，也就是整个“导出默认值”。 导出默认值使我们能够从文件中导出插件，并允许其他文件导入它。

接下来，就像我们之前讨论的那样，我们的插件必须公开.install（Vue，options）方法。 这是安装插件时Vue实际调用的。

现在，骨架代码应该看起来像这样：

export default {
   // called by Vue.use(FirstPlugin)
   install(Vue, options) {

   }
}

让我们在此代码中添加一些内容。

向插件添加功能

我们可以使用几种不同的选项来添加功能。目前，我们只介绍一种简单快捷的方法（不用担心，稍后我们将介绍更高级的技术）。

构建您的第一个插件

一种查看我们的插件运行情况的简单方法是创建一个全局mixin，它将包含在所有Vue实例中。使用Vue.mixin函数可以做到这一点。

本质上，它们使您可以注入其他组件选项。它们是提取和重用组件之间通用功能的好方法。 Mixins还允许您的插件访问Vue生命周期钩子。

要将mixin添加到插件，我们在Vue.mixin函数内声明其他组件选项。首先，我刚刚添加了一个带有console.log语句的生命周期钩子。

现在，我们的插件代码应如下所示：

export default {
  // 被Vue.use调用(第一个插件)
  install(Vue, options) {

    // 创建一个mixin 
    Vue.mixin({
      created() {
        console.log(Vue);
      }
    });
  }
}

 

安装插件

如果您现在要运行项目，则会注意到没有任何变化。 那是因为我们尚未安装插件。

幸运的是，这是一个非常简单的两行过程。 在src / main.js文件（该文件声明了Vue构造函数）中，我们只需导入并安装插件文件。

这是用这些代码行完成的。

import FirstPlugin from "./plugins/first-plugin.js"; 

Vue.use(FirstPlugin);

Vue.use的一大优点是可以确保您的插件仅安装一次。 如果您不小心将它添加了两次，它将减慢您的应用程序的运行速度，并可能使某些功能混乱。 值得庆幸的是，Vue开发人员为我们处理了这些可能的错误操作。

最后。 我们已经安装了插件。 现在，如果我们运行项目并检查日志，我们应该在控制台中看到一些输出。

 

让它真正有用

好，太棒了！ 您已正式创建了第一个插件。 但这实际上并没有做任何有用的事情。

让我们探讨一些使插件正常运行的巧妙方法。

完整内容，请前往http://zhaima.tech/post/%E5%88%9B%E5%BB%BA%E7%AC%AC%E4%B8%80%E4%B8%AAvuejs%E6%8F%92%E4%BB%B6