vue自定义插件与使用

1.vue自定义插件的作用

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

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

这一段是vue官方文档上的原话

先来举例说明一下全局功能：就是不需要像其他的组件一样，每次使用前都需要先引入一次（这里指的是局部组件哈）。但是对于插件来说，只需要在最开始引入一次，在vue项目中的任意地方就可以直接使用。

2.插件原理

vue插件就是一个简单的js对象，这个插件对象有一个公开方法install，这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象，而最终会导出对象以供别人使用，如下所示

1. 定义插件

// 所谓vue的插件，就是一个js对象
let myplugin={
    install:function(Vue,Options){
        // 添加属性与方法
        //这里我写的$testProp等加了$符号的，表示他为vue全局的，但实际上不加也可以的，访问时也不加就行了
        Vue.prototype.$myAttribute='我是插件的属性',
        Vue.prototype.$myfn=function(){
            // 逻辑
            console.log('我是插件的方法')
        }
        // 添加全局混入
        Vue.mixin({
            mounted() {
                // 逻辑
                console.log('组件创建成功')
            },
        })
        // 添加全局指令
        Vue.directive('my-directive',{
            inserted:function(ele, binding, vnode, oldVnode){
                ele.style.border='1px solid green'
                ele.style.background='red'
            }
        })
    }
}
export default myplugin

下面再定义一个处理时间的全局插件（方法）
1.1处理时间的方法 （dateFormat 方法）

/**
 * 时间格式化函数
 * 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
 * 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
 *
 * @param {Date||number} date Date对象或者时间戳
 * @param {string} fmt 格式化字符串
 *        ("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
 *        ("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
 * @returns {string} 格式化后的字符串
 */
export default (date, fmt) => {
  // 如果是时间戳的话那么转换成Date类型
  if (typeof date === 'number') {
    date = new Date(date)
  } else if (typeof date === 'string') {
    date = new Date(parseInt(date))
  }

  let o = {
    // 月份
    'M+': date.getMonth() + 1,
    // 日
    'd+': date.getDate(),
    // 小时
    'h+': date.getHours(),
    // 分
    'm+': date.getMinutes(),
    // 秒
    's+': date.getSeconds(),
    // 季度
    'q+': Math.floor((date.getMonth() + 3) / 3),
    // 毫秒
    'S': date.getMilliseconds()
  }
  if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)) }
  for (let k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
  }
  return fmt
}

1.2 定义插件并暴露该方法

/**
 *
 * 自定义插件
 *
 */
import dateFormat from 'plugins/date'
import remoteFiles from 'plugins/remoteFiles'
const install = function (Vue) {
  if (install.installed) return
  install.installed = true

  // 定义属性到Vue原型中
  Object.defineProperties(Vue.prototype, {
    $dateFormat: {
      get () {
        return dateFormat
      }
    },
    $remoteFiles: {
      get () {
        return remoteFiles
      }
    }
  })
}

export default {
  install
}

1.3 在这里插入一点关于Object.defineProperties方法：直接在一个对象上定义新的属性或修改现有属性，并返回该对象
详情用法见该链接Object.defineProperties

2.使用插件
使用插件的时候，在vue入口文件main.js中引入，再使用use()方法
例：

// 导入Vue框架
import Vue from 'vue'
// 导入主视图文件
import App from './App'
// 导入自定义插件
import Plugins from 'plugins'
// 使用自定义插件
Vue.use(Plugins)

new Vue({
  el: '#app'
  render: h=>h(App)
})

这样就已经全局使用了刚才定义的插件