vue-extend和vue-component注册一个全局组件

extend()是一个全局构造器，生成的是一个还没挂载到页面元素上的组件实例。

在全局挂载插件的形式全局注册，就需要用到vue.use（）方法，官方文档：

所以插件必须是一个对象，并且提供install方法，注册的时候自动调用该方法。

所以组件的写作步骤就清晰了一些了，实践出真知，现在就来练习一下写一个简约版的全局alert弹框

1、在components文件夹下新建alert文件夹，里面首先新建一个alert.vue文件

2、然后在alert文件下再新建一个alert.js文件，写扩展插件的js

import Alert from "./alert.vue";
const ALERT = {
    install(Vue) {
        Vue.component('alert', Alert); // 一定先注册

        Vue.prototype.$alert = (text) => {
            let VueAlert = Vue.extend({
                data() {
                    return {
                        msg: '',
                        showAlert: false
                    }
                },
                render(h) {
                    let props = {
                        msg: this.msg,
                        showAlert: this.showAlert,
                    }
                    return h('alert', {
                        props
                    })
                }
            });
            let newAlert = new VueAlert();
            let vm = newAlert.$mount();
            let el = vm.$el;
            document.body.appendChild(el); // 添加到页面中
            vm.showAlert = true;
            vm.msg = text;
        }
    }
}
export default ALERT;

3、在main.js中引入

、、、、
import diyAlert from '@/components/alert/alert'; // extentd写alert
、、、
Vue.use(diyAlert);

4、这样就可以在全局调用了：

剩下的就是在此基础上进行功能性扩展了，比如关闭，动效等，就简单了。