javascript - 如何正确使用Vue插件？ <插件名称> 未定义

Question

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

plugin1.js:

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

app.js:

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

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

当我尝试运行它时，网页变成空白，并出现错误AlertPlugin is not Defined。

请帮忙？

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 中所做的那样，它将生成一个带有 的 AlertPlugin 对象安装您在插件文件中定义的属性。