vue 手动挂载$mount报错？ 学习element ui做一个自定义的动态组件

Question

看了element ui的源码想学习其思路做一个自定义的动态组件，具体操作如下：创建一个main.vue文件：再创建一个main.jsimport Vue from 'vue';let AlertConstructor = Vue.extend(require('./main.vue'));let instance;var Alert= function (msg) {    instance = new AlertConstructor({        data: {            message: msg        }    });    instance.$mount();    document.body.appendChild(instance.$el);    return instance;};export default Alert;在主入口main.js引入组件：import Alertfrom './alert/src/main.js';Vue.prototype.$myAlert = Alert;然后在页面上测试一下：<button @click='test'>按钮</button>methods:{    test(){        this.$myAlert("hello vue");    }}此时控制台报错：[Vue warn]: Failed to mount component: template or render function not defined.百思不得其解？？？

Answer 1

注册组件 还得掉一个vue的 install 内置方法

//alert里面的main.js

import Vue from 'vue'

import alertComponent from './main.vue'

let AlertConstructor = Vue.extend(alertComponent);

let instance;

var Alert= function (msg) {

    instance = new AlertConstructor({

        data: {

            message: msg

        }

    });

    instance.$mount();

    document.body.appendChild(instance.$el);

    // return instance;  //不需要return了  你都声明全局变量了

};

const install = function(Vue) {  //必须要使用这个方法挂载到vue上

    Vue.prototype.$myAlert = Alert;

}

export default install

// export default Alert;

//主入口main.js这么引用

import Alertfrom from './alert/src/main.js';

Vue.use(Alertfrom)；

然后就可以在别的组件里通过 this.$myAlert()调用了
这里面有比较完整的示例代码，你可以看看