Vue.extend官方使用案例
Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。

应用场景
在 vue 项目中，初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：

1. 组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
2. 所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
   这时候，Vue.extend + vm.$mount 组合就派上用场了。

官网解释： 使用基础 Vue 构造器 Vue.extend，创建一个“子类”。参数是一个包含组件选项的对象。
需要注意 - 在Vue.extend()中 data 选项必须是函数。

一般，我们会用 Vue.extend 接收一个组件对象来创建一个构造器，再利用创建的构造器 new 一个实例，并将这个实例挂载到一个元素上。

官网示例：

<div id="mount-point"></div>;
// 创建构造器
var Profile = Vue.extend({template: "<p>{{firstName}} {{lastName}} aka {{alias}}</p>",data: function () {return {firstName: "Walter",lastName: "White",alias: "Heisenberg"};}
});
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount("#mount-point");

需求： 将原项目中所有用 Element 的 Message 消息提示组件的地方，改为类似element-ui的MessageBox组件的样式：
封装原因：
原来都是用的 Elemnet 的 Message 组件，但当前需要改成最右边的样式，因需要拖动功能以及如添加功能请求后台时，显示“保存中…”的情况需要一个进度条加载效果，element的MessageBox组件无法满足需求，故封装了自己封装了一个

import Modal from "@/components/Modal.vue";
import Vue from "vue";
import eventBus from "@/plugins/mitt.js";
let msgModal = Vue.extend(Modal);msgModal.install = function (Vue) {Vue.prototype.$cf = function (...args) {let instanceModal = new msgModal({ el: document.createElement("div") });document.querySelector("body").appendChild(instanceModal.$el);instanceModal.footer = true;instanceModal.visible = true;instanceModal.close = false;let cfObj = null;[instanceModal.msg, instanceModal.title, cfObj] = args;if (cfObj) {for (let key in cfObj) {instanceModal.cfOptions[key] = cfObj[key];}// 让progress有一个加载的过渡效果instanceModal.cfOptions.percentage = 30;setTimeout(() => {instanceModal.cfOptions.percentage = cfObj.percentage;}, 200);}return new Promise((resolve, reject) => {eventBus.on("confirm", data => {resolve(data);});eventBus.on("cancel", reason => {reject(reason);});});};
};export default msgModal;