我的第一个 Vue 插件

喜欢就关注我们吧

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

有些插件的确非常有用。例如，令人惊艳的UI库和实用程序插件可以帮助我们节省大量的开发时间。

虽然自己创建插件看似是任务艰巨，但实际上可行性比你想象的要大得多。

本教程将介绍如何创建你的第一个VueJS插件。

一起来试试看吧！！

如何设置插件

从广义上讲，插件就是一个公开.install方法的JavaScript模块。方法需要2个参数：

Vue构造函数
选项对象

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

然后在这个新文件夹中，来创建插件文件。在本教程中，我将其命名为first-plugin.js。

在新插件文件中，我们应该遵循典型的ES6模块化模式，也就是整个export default。Export Default允许我们从文件中导出插件并允许其他文件的导入。

接下来，插件还需要公开.install(Vue, options)方法。这就是Vue在我们安装插件时实际调用的内容。

所以现在，骨架代码应该看起来像这样。

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

向插件添加功能

由于我们已经设置了插件的结构，现在让我们开始构建吧。我们可以使用若干不同的选项来添加功能。这里介绍一个快速简单的方法（稍后再介绍更高级的技术）。

构建第一个插件

查看插件运行的一种简单方法是创建一个全局mixin，包含在所有Vue实例中。这可以使用Vue.mixin函数实现。

本质上，VueJS mixins允许注入额外的组件选项，是在组件之间提取和重用通用功能的好方法。此外，Mixins还允许插件访问Vue生命周期钩子。

要将mixin添加到插件中，可以在Vue.mixin函数中声明额外的组件选项。为此，我添加了一个带有console.log语句的生命周期钩子。

此时，插件代码应该如下所示：

export default {
  // called by Vue.use(FirstPlugin)
  install(Vue, options) {
    // create a mixin
    Vue.mixin({
      created() {
        console.log(Vue);
      },
    });
  },
};

安装插件

如果你现在运行项目，你会发现什么都没有改变。那是因为还没有安装插件。

值得庆幸的是，安装过程只要两行就可以，超级简单。我们只需要在src/main.js文件中导入并安装插件文件即可。

可以通过以下代码行完成：

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

Vue.use(FirstPlugin);

Vue.use的一大优点是确保插件只安装一次。如果你不知何故不小心添加了两次，则会减慢app的速度，并且可能会弄乱某些功能。幸运的是，Vue开发人员提供了这个安全保障。

在插件安装完毕之后，如果现在我们运行项目并查看日志，那么可以在控制台中看到一些输出。

真正让这个插件发挥作用

太好了！你已经正式创建了第一个插件。然而这个插件并没有做什么太有用的事情。

那么，试试一些巧妙的方法来让插件发挥作用吧。

声明全局属性

全局数据/方法是一种向代码添加广泛功能的有用方法。并且非常容易做到。假设我们希望app的当前版本号是全局属性。

代码如下：

export default {
  install(Vue, options) {
    // define a global property
    Vue.VERSION = "v2.0.3";
  },
};

需要注意的是应避免过度使用全局变量。

定义实例属性

这是我最喜欢的添加方式之一。实例属性是一种向Vue项目添加数据和方法的便捷方式。我更喜欢使用实例属性，因为这样更能保持全局范围干净且易于理解。

在本文的例子中，我创建了一个实例方法，用于接受一个字符串并放置在<i>标签内。

注意：$不是必需的语法；这只是Vue用于实例属性以避免冲突的命名约定。

// define an instance method
Vue.prototype.$italicHTML = function (text) {
  return "<i>" + text + "</i>";
};

然后，我们可以在任何实例中使用，就像这样：

<div v-html="$italicHTML(content)"></div>

构建全局过滤器

VueJS过滤器是我最喜欢的技术之一，因为这个技术使得文本转换非常简单。而我们所要做的就是调用Vue构造函数方法Vue.filter和boom。

假设我们要使用过滤器从较长的文本生成预览片段。那么插件中应该有如下代码：

// define a global filter
Vue.filter("preview", (value) => {
  if (!value) {
    return "";
  }
  return value.substring(0, userOptions.cutoff) + "...";
});

添加自定义指令

自定义指令是对特定元素进行底层DOM访问的好方法。

让我们在插件中创建一个自定义指令，自动聚焦到页面上的元素。

在install方法中，我们使用Vue.directive方法来声明新指令。

// add a custom directive
Vue.directive("focus", {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus();
  },
});

然后，添加到元素上。这样我们就实现了如何在页面加载时自动聚焦文本输入。

<input type='text' placeholder='Type...' v-focus />

合并选项对象

到目前为止，我们还没有触及install方法的第二个参数。此方法可以让插件在不同的场景下更加灵活。

为了使用选项对象，我们首先必须向插件传递一些选项。

处理选项对象时的一种最佳实践是创建一些默认值。我们可以通过在插件文件中私有定义默认选项对象，然后使用JavaScript的spread语法将默认选项与参数选项合并来实现这一点。

回顾之前的示例，假设我们要添加一个选项，以便允许我们设置文本预览的截止点。代码如下：

const defaultOptions = {
  cutoff: 50,
};

export default {
  // called by Vue.use(FirstPlugin)
  install(Vue, options) {
    // merge default options with arg options
    let userOptions = { ...defaultOptions, ...options };

    // REST OF PLUGIN CODE
  },
};

现在，即使没有给插件传递给选项，它也将运行默认值。

如果我们确实想传递选项，也很简单。在src/main.js文件中，我们要做的就是向Vue.use方法添加第二个参数。这个参数将成为选项对象。

Vue.use(FirstPlugin, { cutoff: 100 });

因为我们将参数选项放在spread语法的右侧，所以它会覆盖默认值。

最终的Hodge-Podge插件

请看我们最终的插件代码。

const defaultOptions = {
  cutoff: 50,
};

export default {
  // called by Vue.use(FirstPlugin)
  install(Vue, options) {
    // merge default options with arg options
    let userOptions = { ...defaultOptions, ...options };

    // create a mixin
    Vue.mixin({
      created() {
        console.log(Vue);
      },
    });

    // define a global property
    Vue.VERSION = "v2.0.3";

    // define an instance method
    Vue.prototype.$italicHTML = function (text) {
      return "<i>" + text + "</i>";
    };

    // define a global filter
    Vue.filter("preview", (value) => {
      if (!value) {
        return "";
      }
      return value.substring(0, userOptions.cutoff) + "...";
    });

    // add a custom directive
    Vue.directive("focus", {
      // When the bound element is inserted into the DOM...
      inserted: function (el) {
        // Focus the element
        el.focus();
      },
    });
  },
};