VUE vue.use()引用js文件方法

写了上一篇文章后，我尝试了在一个js文件里面放两个公共控件，结果一直报方法找不到的问题，初学vue，有些语法不太了解，研究了一下午，最后解决，分享下。

首先是js最后的export和export default的区别，简单的说，export default输出单个值，引用的时候可以随便写函数名字，exprot输出多个值,引用的时候需要加括号，把引用的函数写进去，所以下面的这种写法是错的

最后报了个不是方法的错误，正确的如下图



最后贴一下index.js和另外一个弹窗的代码
index.js:

/*
 * @Author: your name
 * @Date: 2022-01-26 16:59:07
 * @LastEditTime: 2022-02-07 17:08:59
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuepro\src\common\index.js
 */
import alert from '../components/alert.vue'
import modal from '../view/Modal.vue'

function installAlert(Vue) {
  Object.defineProperty(Vue.prototype, '$alert111', {
    get() {
      let div = document.createElement('div')
      document.body.appendChild(div);
      return (message) => {
        const Constructor = Vue.extend(alert)
        const Instance = new Constructor({
          data() {
            return {
              message: message,
              show: true
            }
          }
        }).$mount(div);
      };
    }
  });
};


function installModal(Vue) {
  Object.defineProperty(Vue.prototype, '$modal', {
    get() {
      let div = document.createElement('div')
      document.body.appendChild(div);
      return (title) => {
        const Constructor = Vue.extend(modal)
        const Instance = new Constructor({
          data() {
            return {
              title: title,
              show: true,
              x: 0,
              y: 0,
              node: null,
              isCanMove: false,
            }
          }
        }).$mount(div);
      };
    }
  });
};

// export default installAlert
// export default installModal

export {
  installAlert,
  installModal,
};

alert.vue:

<!--
 * @Author: your name
 * @Date: 2022-01-26 16:53:31
 * @LastEditTime: 2022-02-07 14:21:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuepro\src\components\alert.vue
-->
<template>
  <!-- <transition name="dialog-fade"> -->
  <div
    v-if="show"
    class="modal fade dialog-modal"
    role="dialog"
    data-backdrop="false"
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header row">
          <h5 class="modal-title col-md-4">提示</h5>
          <button type="button" class="close" aria-label="Close" @click="close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="col-xs-offset-1">{{ message }}</div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" @click="close">
            确定
          </button>
        </div>
      </div>
    </div>
  </div>
  <!-- </transition> -->
</template>
<script>
export default {
  methods: {
    close: function () {
      this.show = false;
    },
  },
};
</script>

程序架构，逻辑相关的都标出来了：