Vue.js 中的插件是什么？如何编写一个插件？

插件是 Vue.js 生态系统中的重要组成部分。它可以为 Vue 添加全局功能。插件的功能范围非常广泛,从全局方法或资源的添加,到新的全局指令的创建。
编写一个 Vue 插件的步骤:

1. 创建一个 JavaScript 对象,它有 install 方法:

js
const myPlugin = {
  install(Vue, options) {
    // 1. 添加全局方法或属性
    Vue.myGlobalMethod = function() {
      // 逻辑...
    }

    // 2. 添加全局资源
    Vue.directive('my-directive', {
      // 逻辑...
    })

    // 3. 添加 Vue 实例方法
    Vue.prototype.$myMethod = function() {
      // 逻辑...
    }  
  }
}  

2. 传递插件对象给 Vue.use():

js
import myPlugin from './myPlugin'

Vue.use(myPlugin)  

3. install 方法中的第一个参数是 Vue 构造器,第二个可选参数是插件引入时传递的选项。
4. Vue.use() 会自动阻止重复安装相同插件,届时只会调用一次 install 方法。
   示例插件:

js
const myPlugin = {
  install(Vue, options) {
    Vue.filter('possessive', function(value) {
      if (value.match(/s$/) && !options.noP) {
        return value + '\'s'  
      }
      return value + '\'s'  
    })
  }  
} 

Vue.use(myPlugin, { noP: true })  // 传递选项  

html
<p>{{ name | possessive }}</p>   // 使用过滤器