vue中自定义插件的使用

在vue中使用插件

• 在src下新建libs文件夹，在其中新建Myplugin文件夹并新建index.js, 内容如下：

myplugin.install = function (Vue, options) {

  // 可以在插件中定义全局方法/属性

  Vue.myglobalMethod = function () {
    console.log('我是全局方法')
  }

  // 定义全局指令
  Vue.directive('my-directive', {
    bind () {
      console.log('指令绑定成功')
    }
  })

  // 全局混入
  Vue.mixin({
    created () {
      console.log('created in plugin')
    }
  })

  // 定义实例方法
  Vue.prototype.$myMethod = function () {
    console.log('plugin---实例方法')
  }
}

export default myplugin;

• 在mian.js中进入并使用

// vue 中使用插件
import Myplugin from './libs/Myplugin'
Vue.use(Myplugin)
// 使用全局方法
Vue.myglobalMethod()

• 在页面中直接使用实例方法

  created () {
    this.$myMethod()
  },