温故知新 | Vue.js进阶必会，编写你的第一个Vue.js插件

栏目: IT技术 · 发布时间: 4年前

创建自己的插件似乎是一项高级技术，但实际上比你想象的要简单得多。

本文目录

1.如何设置插件
2.向插件添加功能

2.1构建你的第一个插件
2.2安装插件

2.让它真正有用

2.1声明全局属性
2.2定义实例属性
2.3建立全局过滤器
2.4添加自定义指令
2.5合并选项对象
2.6我们最终的插件

获取完整项目代码代码

让我们开始吧！

1.如何设置插件

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

Vue构造函数
选项的对象

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

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

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

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

因此，现在 first-plugin.js 的代码应该是这样的：

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

   }
}

现在，让我们实际在此代码中添加一些内容。 2.向插件添加功能

既然我们已经建立了插件的框架，我们就可以开始构建它了。我们可以使用几种不同的选项来添加功能，目前，我们只介绍一种简单快捷的方法（不用担心，稍后我将介绍更高级的技术）。

2.1构建你的第一个插件

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

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

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

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

// first-plugin.js

export default {
  // 调用 Vue.use(FirstPlugin)
  install(Vue, options) {

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

2.2安装插件

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

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

// main.js

import FirstPlugin from "./plugins/first-plugin.js";
Vue.use(FirstPlugin);

Vue.use 的一大优点是可以确保你的插件仅安装一次。如果你不小心添加了两次，它会减慢你的应用程序，可能还会搞砸一些功能。

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

2.让它真正有用

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

让我们来看看一些让插件发挥功能的简洁方法。

2.1声明全局属性

全局数据/方法是一种向代码添加普遍功能的有用方法，这也非常容易做到。假设我们希望我们的应用程序的当前版本为全局属性，会是这样的：

// first-plugin.js

install(Vue, options) {
   // 定义全局顺序
   Vue.VERSION = 'v2.0.3';
}

要注意的一件事是过度使用全局变量，很容易将全局范围挤得太满，使其难以使用。

2.2定义实例属性

这是我最喜欢的添加插件的方法之一。实例属性是将数据和方法添加到Vue项目的便捷方法，我更喜欢使用实例属性，以保持全局范围的整洁和易于理解。

在此示例中，我刚刚创建了一个实例方法，该方法将一个字符串放在 <i> 标记内。

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

// first-plugin.js

// 定义实例属性
Vue.prototype.$italicHTML = function (text) {
  return '<i>' + text + '</i>';
}

然后，我们可以在任何这样的实例中使用它

// Component.vue

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

2.3建立全局过滤器

过滤器是我最喜欢的技术之一，因为它们使文本转换变得如此容易。同样，我们所要做的就是调用Vue构造函数方法Vue。在我们的整个Vue项目中，我们有一个可重复使用的全局过滤器。

假设我们要使用过滤器来根据较长的文本生成预览代码段，我们在插件中这个事情。

// first-plugin.js

// 建立全局过滤器
Vue.filter('preview', (value) => {
  if (!value) {
    return '';
  }
  return value.substring(0, userOptions.cutoff) + '...';
})

2.4添加自定义指令

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

查看VueJS文档中的示例，让我们在插件内部创建一个自定义指令，该指令可自动将元素聚焦在页面上。

在install方法内部，我们只需要使用 Vue.directive 方法来声明我们的新指令。

// first-plugin.js

// 添加自定义指令
Vue.directive('focus', {
  // 当绑定元素被插入到DOM中时…
  inserted: function (el) {
    el.focus();
  }
})

然后，我们可以把它加到一个元素上。这是我们自动将文本输入聚焦在页面加载上的方式。

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

2.5合并选项对象

至此，我们还没有涉及install方法的第二个参数，此方法使您的插件在不同情况下更加灵活。

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

使用 options 对象时，一种最佳实践是创建一些默认值。为此，我们可以在插件文件中私下定义默认选项对象，然后使用Javascript的扩展语法将默认选项与参数选项合并，从而实现这一点。

回顾前面的示例，假设我们希望添加一个选项来设置文本预览的截止点。大概是这样的：

// first-plugin.js

const defaultOptions = {
  cutoff: 50
};

export default {
  install(Vue, options) {
    // 合并默认选项与arg选项
    let userOptions = {...defaultOptions, ...options};
    // 剩余插件代码
  }
}

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

使用options对象时，一种最佳实践是创建一些默认值。

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

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

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

2.6我们最终的插件

在实现这些技术之后，这是我们最终的插件代码。

// first-plugin.js

const defaultOptions = {
  cutoff: 50
};

export default {
  // 被Vue.use(FirstPlugin)
  install(Vue, options) {
    let userOptions = { ...defaultOptions, ...options };
    // create a mixin
    Vue.mixin({
      created() {
        console.log(Vue);
      }
    });

    // 定义全局属性
    Vue.VERSION = "v2.0.3";

    Vue.prototype.$italicHTML = function(text) {
      return "<i>" + text + "</i>";
    };
    // 建立全局过滤器
    Vue.filter("preview", value => {
      if (!value) {
        return "";
      }
      return value.substring(0, userOptions.cutoff) + "...";
    });
    // 添加自定义指令
    Vue.directive("focus", {
      // 当绑定元素被插入到DOM中时…
      inserted: function(el) {
        el.focus();
      }
    });
  }
};

就功能而言，此插件绝对遍地都是。但是，如果你遵循了本文的内容，那么你现在已经熟悉了构建更高级插件所需的大多数工具、方法和技术。