什么是Vue.js的插件？如何创建一个插件？

发表于 作者 IT之美

Vue.js 的插件是对 Vue 自身功能的扩展。它包含以下几种:

  1. 添加全局方法或属性,如:vue-custom-element
  2. 添加全局资源:指令/过滤器/过渡等,如:vue-touch
  3. 通过全局 mixin 方法添加一些组件选项,如: vue-router
  4. 添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。
  5. 一个库,提供自己的 API,同时提供上面提到的一个或多个功能,如:vue-axios

创建 Vue.js 插件的示例代码:

js
// vue-demo-plugin.js
(function () {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () { ... }    
  Vue.myProperty = 'value'

  // 2. 添加全局资源
  Vue.directive('demo', { ... })  

  // 3. 添加全局 mixin
  Vue.mixin({
    methods: { ... }
  })  

  // 4. 添加实例方法
  Vue.prototype.$demo = function (name) { ... }  

  // 5. 深入修改 Vue 实例
  Vue.config.optionMergeStrategies.demo = function (toVal, fromVal) { ... } 
})()


// 使用插件
import Vue from 'vue'
import DemoPlugin from './vue-demo-plugin'

Vue.use(DemoPlugin)

new Vue({
  // ...  
})

要使用这个插件,我们需要调用 Vue.use() 方法传入插件对象。这会自动对插件进行安装,并执行其 install 方法(如果有)。

install 方法会接收 Vue 作为第一个参数,并在调用 Vue.use() 的地方调用。我们可以在 install 中执行上述 1-5 的功能来对 Vue 进行扩展。

一个 Vue.js 插件的好处是可以扩展 Vue 的全局/实例功能,并且易与其他框架或库集成。但是如果过度使用插件,也会使框架本身变得松散和无序。