Comment utiliser Vue Plugins correctement? <PluginName> ne définit pas

Question

Im apprendre à faire Vue Plugin, basé sur https://vuejs.org/v2/guide/plugins.html, voici mon code simple:

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) 
}); 

Lorsque j'essaie de l'exécuter, la page Web devient vide et l'erreur AlertPlugin n'est pas définie.

aidez s'il vous plaît?

Answer 1

Dans votre fichier plugin1.js, vous tentez de définir la propriété install de l'objet AlertPlugin qui, comme l'indique l'erreur, n'est pas définie.

Votre fichier plugin1.js devrait ressembler à ceci:

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

Ceci définit un objet default à exporter contenant une propriété install. Lorsque vous importez cet objet en tant que AlertPlugin, comme dans app.js, il en résulte un objet AlertPlugin avec la propriété install que vous avez définie dans le fichier du plug-in.