简单的 Vue 插件：如何制作你的第一个 VueJS 插件

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

事实上，我发现有一些插件疯狂有用。例如，有惊人的UI 库和实用插件，为我节省了大量的开发时间。

虽然创建自己的插件似乎是一项艰巨的任务，但它实际上比您想象的要可行得多。在本教程结束时，您将拥有...

• 创建了你的第一个 VueJS 插件

• 概述它们的工作原理

• 学习了构建更复杂插件的所有工具

是时候潜入了！！

如何设置您的插件

从广义上讲，我们的插件只是一个公开_.install_method的 JavaScript 模块。此方法需要 2 个参数

• Vue 构造函数

• 选项的对象

让我们开始吧。

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

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

虽然创建自己的插件似乎是一项艰巨的任务，但它实际上比您想象的要可行得多。

在我们的新插件文件中，我们应该遵循一个典型的ES6 模块模式又名整个“导出默认值”的东西。Export Default 允许我们从其文件中导出插件并允许其他文件导入它。

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

所以现在，骨架代码应该有点像这样。

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

现在，让我们实际向这段代码添加一些东西。

向插件添加功能

既然我们已经设置了插件的大纲，我们就可以开始构建它了。我们可以使用几种不同的选项来添加功能。现在，我们只介绍一个快速简便的方法（别担心，我们稍后会介绍更高级的技术）。

构建您的第一个插件

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

如果您不熟悉，以下是VueJS mixin 从本质上讲，它们允许您注入其他组件选项。它们是提取和重用组件之间通用功能的好方法。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 文件中——声明我们的 Vue 构造函数的文件——我们只需要导入并安装我们的插件文件。

这是通过这些代码行完成的。

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

Vue.use(FirstPlugin);

Vue.use 的一大优点是它确保你的插件只安装一次。如果您以某种方式不小心添加了两次，它会减慢您的应用程序速度，并可能搞砸某些功能。值得庆幸的是，Vue 开发人员提供了这个安全网。

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

让我们让它真正有用

好的，太好了！您已经正式创建了您的第一个插件。但它并没有真正做任何太有用的事情。

让我们来看看一些使您的插件正常运行的巧妙方法。

声明全局属性

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

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

需要注意的一件事是过度使用全局变量。它非常容易使全球范围过度拥挤，并使使用起来很痛苦。

定义实例属性

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

在此示例中，我刚刚创建了一个实例方法，该方法采用字符串并放置在标记中。

注意：$ 不是必需的语法;这只是 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——我们在整个 Vue 项目中有一个可重用的全局过滤器。

以我之前关于过滤器的教程中的一个例子为例，假设我们想使用过滤器从较长的文本生成预览片段。我们想在我们的插件中做这样的事情。

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

添加自定义指令

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

从VueJS 文档，让我们在插件中创建一个自定义指令，该指令会自动将元素聚焦在页面上。

在 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 />

合并 Options 对象

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

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

一最佳实践使用 Options 对象时，需要创建一些默认值。我们可以通过私下将默认选项对象定义到插件文件，然后使用 Javascript 的传播语法将默认选项与参数选项合并。

回顾前面的示例，假设我们想添加一个选项，允许我们设置文本预览的截止点。那会是这样的......

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
  },
}

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

使用 options 对象时，最佳做法之一是创建一些默认值。

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

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

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

我们最终的大杂烩插件

实施这些技术后。这是我们最终的插件代码。

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()
      },
    })
  },
}

是的。这个插件在功能方面绝对是无处不在的。但是，如果您按照操作，您现在已经熟悉了构建更高级插件所需的大多数工具、方法和技术。

结论

看？还不错！你制作了你的第一个插件。我希望本教程能很好地介绍创建 VueJS 插件的可能性。