如何正确使用 Vue 插件？<PluginName> 没有定义

Question

我正在学习制作 Vue 插件，基于https://v2.vuejs.org/v2/guide/plugins.html ，这是我的简单代码：

插件1.js：

AlertPlugin.install = function (Vue, options) {
    Vue.prototype.$classicalert = function (message) {
        alert(message)
    };
};

应用程序.js：

window.Vue = require('vue');
import AlertPlugin from './plugin1.js'
Vue.use(AlertPlugin);

const app = new Vue({
    el: '#app',
    render: h => h(Main)
});

当我尝试运行它时，网页变为空白，并且错误AlertPlugin 未定义。

请帮忙？

Answer 1

在您的plugin1.js文件中，您正在尝试设置AlertPlugin对象的install属性，该对象（如错误所示）未定义。

您的plugin1.js文件应如下所示：

export default {
  install: function (Vue, options) {
    Vue.prototype.$classicalert = function (message) {
      alert(message)
    };
  }
}

这定义了一个要导出的default对象，其中包含一个属性install 。 当您将此对象导入为AlertPlugin时，就像您在app.js中所做的那样，它将生成一个带有您在插件文件中定义的install属性的AlertPlugin对象。