Vue关于install自定义全局插件

以loading组件为例，这个用的比较多
步骤：
一.定义loading.vue组件，方法同定义普通组件(好像少写了这篇文章)
二.定义loading.js，基本写法如下

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或属性
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
  // 3. 注入组件
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}
使用

三.全局引用，通过全局方法 Vue.use() 使用插件:
// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

loading.vue

<template>
  <transition :name="animateName">
    <div class="loadings" v-show="isShow">
      <img src="../../../assets/image/loadingV1.gif">
    div>
  transition>
template>
<script type="text/babel">
  export default {
    data() {
      return {
        isShow: false,
        hasAnimate: true,
      }
    },
    computed: {
      /**
       * 动画效果样式，没有返回空
       * @return {String} 样式
       */
      animateName() {
        return this.hasAnimate ? 'opacity' : ''
      },
    },
    methods: {
      /**
       * 开启动画效果
       */
      opemAnimate() {
        this.hasAnimate = true
      },
      /**
       * 去除动画效果
       * @return {Promise} 返回promise
       */
      removeAnimate() {
        return new Promise((resolve) => {
          this.hasAnimate = false
          resolve()
        })
      },
      /**
       * 显示动画loading
       */
      show() {
        this.isShow = true
      },
      /**
       * 隐藏动画loading
       */
      hide() {
        this.isShow = false
      },
    },
  }
script>

<style lang="less" scope>
  @import "./../../../assets/css/variable_gather";
  .loadings {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: transparent;
    z-index: 10000;
    img{
      position: absolute;
      top:10%;
      left: 50%;
      transform: translateX(-50%);
      width: 6rem;
      height: 6rem;
    }
  }



  .opacity {
    &-enter-active, &-leave-active {
      transition: all 0.6s
    }
    &-enter, &-leave-active {
      opacity: 0
    }
  }
style>

loading.js

import Loading from '../shared/components/loading/loading.vue'

export default {
  /**
   * 每个插件都有的install方法，用于安装插件
   * @param {Object} Vue - Vue类
   * @param {Object} [pluginOptions] - 插件安装配置
   */
  install(Vue, pluginOptions = {}) {
    // 创建"子类"方便挂载
    const VueLoading = Vue.extend(Loading)
    let loading = null

    /**
     * 初始化并显示loading
     * @returns {Promise} Promise实例
     */
    function $loading() {
      return new Promise((resolve) => {
        // 第一次调用
        if (!loading) {
          loading = new VueLoading()
          // 手动创建一个未挂载的实例
          loading.$mount()
          // 挂载
          document.querySelector(pluginOptions.container || 'body').appendChild(loading.$el)
        }
        // 显示loading
        loading.show()
        resolve()
      })
    }
    // 定义关闭loading方法
    $loading.end = (noAnimate = false) => {
      return new Promise((resolve) => {
        if (!loading || !loading.isShow) {
          resolve()
          return
        }
        // 首页判断是否在关闭时需要动画
        if (noAnimate) {
          // 默认只在此次行为下移除动画,之后的行为仍有动画
          loading.removeAnimate().then(() => {
            loading.opemAnimate()
          })
        }

        loading.hide()
      })
    }

    Vue.loading = Vue.prototype.$loading = $loading
  },
}

在main.js里调用

import Loading from 'util/loading'
Vue.use(Loading)

最后，你就可以随便使用了

//加载中
export function loading() {
  Vue.loading();
}
//关闭加载中动画
export function closeLoading() {
  Vue.loading.end();
}

有一个暂时未发现是什么原因的小坑，不建议loading.vue和loading.js放在同一级目录下，正在思考为什么会默认引用js文件，有知道的小伙伴请帮忙解答下