Vue 插件

插件，通常用来为Vue 添加全局功能。
引用官方文档Vue插件

使用插件

通过全局方法Vue.user()使用插件。它需要在价钱调用new Vue()启动应用之前完成

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

也可以传入一个可选的选项对象

Vue.use(MyPlugin, { someOption: true })

开发插件

Vue.js 的插件应该暴露一个install方法。这个方法的第一个参数是Vue构造器，第二个参数是一个可选的选项对象

MyPlugin.install = function (Vue, option) {
  // 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的全局组件

1. 先创建一个组件loading.vue

<template>
    <div>
        {{msg}}
    </div>    
</template>
<script>
export default {
    data() {
        return {
            msg:'loading......'
        }
    }
}
</script>

2. 在组件的同级目录下，再创建一个index.js文件

import LoadingComponents from './loading.vue';

// 1. 安装，输出对象，有属性`install`
const loading = {
    install:function(Vue) {
        Vue.component('Loading', LoadingComponents)
    }
}
export default loading;

// 2. 安装，直接输出方法
// export default function(Vue) {
//   Vue.component('Loading', LoadingComponents)
// }

3. 引入组件（插件），使用Vue.use()

import Vue from 'vue'
import App from './App.vue'
import loading from './components/loading/'

Vue.use(loading);

new Vue({
  el: '#app',
  data:{
    eventHub: new Vue()
  },
  render: h => h(App)
})