Vue公司创建插件

Question

我觉得有点像我想的东西很简单，但我一直在尝试了不同的东西，搜索所有的地方，不能弄清楚如何在我的Vue的应用程序中使用的方法从一个自定义的插件。

在“vuePlugin.js”我有这样的：

const myPlugin = {};
myPlugin.install = function(Vue, options){
    Vue.myMethod = function(){
        console.log("It worked!");
    }
}

在我main.js我有：

import myPlugin from './js/vuePlugin.js'
Vue.use(myPlugin);

然后在我的App.vue我有：

export default {
    name: 'app',
    props: {},
    data () {
        return{ someData: 'data' }
    },
    beforeCreate: function(){
        myMethod();
    }
}

有了这个，我拿到“myMethod的没有定义”的错误。

我试着说：

var foo = myPlugin();
console.log(foo);

在我的控制台我得到所谓的“安装”带参数的对象：“异常：类型错误：‘主叫’和‘参数’被限制的功能特性，不能在这方面进行访问的Function.remoteFunction。”

所有的文件似乎只是展示了如何创建插件和“使用”，但实际上不是如何在其访问任何东西。我缺少的是在这里吗？

Answer 1

你要导出对象vuejs使用如下

file vuePlugin.js

const myPlugin = {}
myPlugin.install = function (Vue, options) {
  Vue.myMethod = function () {
    console.log('It worked!')
  }
  Vue.prototype.mySecondMethod = function () {
     console.log('My second Method ')
  }
}
export default myPlugin

同时呼吁你不能直接调用该方法的方法，你有如下所示的代码中使用

file App.vue

export default {
    name: 'app',
    props: {},
    data () {
        return{ someData: 'data' }
    },
    beforeCreate: function(){
        Vue.myMethod(); // call from Vue object , do not directly  call myMethod() 
        this.mySecondMethod() // if you used prototype based method creation in your plugin 
    }
}

希望它会帮助你