vue组件挂载到全局方法

vue组件挂载到全局方法

在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。
以bootstrap-vue中的Alert组件为例，分一下几步进行：

1、定义一个vue文件实现对原组件的再次封装

main.vue

<template>
  <b-alert
    class="alert-wrap pt-4 pb-4"
    :show="isAutoClose"
    :variant="type" dismissible
    :fade="true"
    @dismiss-count-down="countDownChanged"
    @dismissed="dismiss"
    >
     {
     {msg}}
    </b-alert>
</template>
<script>
export default {
  /**
   * 参考: https://bootstrap-vue.js.org/docs/components/alert
   * @param {string|number} msg 弹框内容
   * @param {tstring} type 弹出框类型 对应bootstrap-vue中variant 可选值有：'primary'、'secondary'、'success'、'danger'、'warning'、'info'、'light'、'dark'默认值为 'info'
   * @param {boolean} autoClose 是否自动关闭弹出框
   * @param {number} duration 弹出框存在时间(单位：秒)
   * @param {function} closed 弹出框关闭，