Vue 插件的开发和使用

开发插件

---

插件通常会为 Vue 添加全局功能。插件的范围没有限制—一般有下面几种：

1. 添加全局方法或者属性，这个还是比较常用的。
2. 添加全局资源：指令/过滤器/过度等。
3. 通过全局 mixin 方法添加一些组件选项。
4. 添加 Vue 实例方法，通过把他们添加到 Vue.prototype 上实现。
5. 一个库，提供自己的 API ，同事提供上面提到的一个或多个功能。

Vue.js 的插件有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

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

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

  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })

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

添加实例方法或属性

---

核心思想是：通过 prototype 来添加方法和属性。

写一个最常见的公用方法，日期时间的格式化：

dataUtil.js

import moment from 'moment';

/*获取日期的标准化格式*/
function getStandardDate(val){
  if(val==undefined) return '';
  if(val==null||val=='') return '';
  return moment(val).format("YYYY-MM-DD");
}

/*获取时间的标准化格式*/
function getStandardTime(val){
  if(val==undefined) return '';
  if(val==null||val=='') return '';
  return moment(val).format("YYYY-MM-DD HH:mm:ss");
}

export default{
  getStandardDate:getStandardDate,
  getStandardTime:getStandardTime
};

main.js

import utilDate from './util/dateUtil'
Vue.prototype.utilDate=utilDate;

在组件中调用该方法就是

this.utilDate.getStandardDate(val)
this.utilDate.getStandardTime(val)

添加全局方法或属性

---

核心思想：就是给 Vue 对象添加一个方法或属性。

和“添加实例方法或属性”区别是，添加实例方法或属性是给组件内部使用的，相当于组件Methods里定义的方法，而添加全局方法或属性是给Vue对象使用的。

例如：有一个方法test()，那么：

　　通过添加实例方法或属性添加，是在组件里，通过this.test()来调用

　　通过添加全局方法或属性添加，是在外面通过Vue实例，如Vue.test()来调用

• 写：

Vue.test= function (){   alert(2)   }

• 用:

Vue.test()

添加全局资源

和正常方法类似，甚至几乎一样，可以添加【自定义指令】【过滤器】【过渡】等，这里以【过滤器】为例

main.js
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

{
     { message | capitalize }}


<div v-bind:id="rawId | formatId">div>

你可以在一个组件的选项中定义本地的过滤器：

//把字母字符串的第一个字母转化为大写
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

或者在创建 Vue 实例之前全局定义过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

注入组件

核心思想：就像写Vue组件时，那样写，方法名保持一致，其会在执行组件对应的方法名之前执行，或者不需要这种需求，只是简单注入到各个组件methods中.但在实际项目中用到的比较少.