10_Vue插件

1. 插件有什么用

通常，我们需要为Vue 添加一些全局的扩展功能，此时就可以使用插件来进行扩展。

所谓全局：即不需要像组件，指令，过滤器那样，每次使用它之前都需要引入一次。对于插件只要在最开始引入一次，在任何组件就可以直接使用。（类似于我们在window上添加的方法属性那样，任何地方都可以用）
插件能实现的功能没有限制，不过常见下面几种：

• 添加全局方法或者属性
• 添加全局资源：组件/指令/过滤器
• 添加Vue实例方法，通过把它们添加到Vue.prototype上实现。
• 库，提供自己的API ，比如 vue-router

2. 插件编写规范

一个Vue插件本质上就是一个JS对象，这个JS对象必须有一个公开的方法，名字为install ,该方法接受两个参数，一个是Vue构造器，一个是可选的选项参数。

MyPlugin.js

let MyPlugin = {}
MyPlugin.install = function(Vue, options) {
    // 1. 添加一个全局方法
    Vue.sayHello = function() {
        return 'Hello 这是Vue的一个全局方法'
    }

    // 2. 添加一个实例方法
    Vue.prototype.$sayBye = function() {
        return "Bye 这是一个实例方法"
    }

    // 3. 注册全局指令
    Vue.directive('my-directive', {
        bind(el, binding, vnode, oldVnode) {
            // 逻辑...
        }
    })
}
export default MyPlugin

在这个插件中，注册了一个全局方法，一个实例方法和一个指令

3. 使用插件

使用插件即让自定义的插件生效。这需要通过Vue对象的方法 Vue.use(插件对象)。调用use方法必须在实例化Vue对向之前使用。

• Vue.use接受一个参数plugin，它首先会检查这个plugin是否已经注册，如果已经注册，则二次注册是无效的。
• 接着会调用插件的 install方法

main.js

import Vue from 'vue'
import App from '@/components/App'
import 'bootstrap/dist/css/bootstrap.css'
// 引入插件
import MyPlugin from '@/plugins/MyPlugin'
// 使用插件
Vue.use(MyPlugin)
// 实例化Vue对象，注意注册插件一定要在实例化Vue对象之前完成
const vm = new Vue({
    el: '#app',
    render: h => h(App)
})

App.vue

<template>
  <div>
    使用插件
    <div>
    <span class="label label-success">
       使用插件中定义的全局方法 === {{ msg1 }} ===
    </span>
      <br />

      <span class="label label-info">
       使用插件中定义的实例方法 === {{ msg2 }} ===
    </span>
    </div>
   
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data() {
    return {
     
    }
  },
  computed:{
    msg1(){
      // 调用插件中注册的全局方法
      return Vue.sayHello()
    },
    msg2(){
      // 调用插件中注册的实例方法
      return this.$sayBye()
    }
  }
}
</script>