Vue插件

Vue插件

vue插件可以在全局引用，所以其实现实质上就是一个全局组件的实现，我们来看插件的使用方法：

import xxx from 'xxx.js'
vue.use(xxx)

Vue.use的作用是注册一个Vue插件(注册组件), Vue.use必须在new Vue之前使用。

当某一个组件或者功能经常需要被使用到时, 我们就可以将这个组件或者功能定义成一个插件。

Vue插件实现

前面可以看到插件的实现并非是直接将全局组件注册到全局，而是引入了一个js文件，显然这个js文件是这个要实现的组件或功能的入口文件。
1.结构（假设实现一个loading功能的插件，此插件是一个显示正在加载的图案）

新建一个plugin的文件夹，专门存放自己封装的插件，建立一个以插件功能命名的文件夹，下面存放组件和对应的index文件。

2.index入口
格式：

import loading from ‘loading’

export default {
      install：function（）{
          Vue.component(Loading.name, Loading)
      }
}

如果要将一个组件封装成一个插件, 那么必须提供一个install方法,必须在install方法中注册当前的这个组件。

3.使用插件
我们在入口文件中引入插件对应的index文件，并且通过vue.use的方式使用。

vue插件的特点

插件的封装很简单，就是将一个组件或功能包裹到index文件中，调用这个index文件，使用vue对象的use方法使用即可，那么，为什么要大费周章将组件写成插件格式呢？

通过上面的在install方法内注册全局组件的方式确实可以正常使用，但还要在index文件中导入vue对象，使用时还必须像其它组件一样写一对标签，功能也有局限性。

我们来看看插件的实现代码：

// import vue from 'vue'
import Loading from './Loading'

export default {
  install: function (Vue, Options) {
    // Vue.component(Loading.name, Loading)
   
    // 1.根据我们的组件生成一个构造函数
    let LoadingContructor = Vue.extend(Loading)
    
    // 2.根据构造函数创建实例对象
    let LoadingInstance = new LoadingContructor()
    
    // 3.随便创建一个标签(元素)
    let oDiv = document.createElement('div')
    
    // 4.将创建好的标签添加到界面上
    document.body.appendChild(oDiv)
    
    // 5.将创建好的实例对象挂载到创建好的元素上
    LoadingInstance.$mount(oDiv)
    
    // 添加初始化值
    if (Options && Options.title !== null && Options.title !== undefined) {
      LoadingInstance.title = Options.title
    }
    // 添加全局方法
    Vue.showLoading = function () {
      LoadingInstance.isShow = true
    }
    Vue.hiddenLoading = function () {
      LoadingInstance.isShow = false
    }
    // 添加实例方法
    Vue.prototype.$showLoading = function () {
      LoadingInstance.isShow = true
    }
    Vue.prototype.$hiddenLoading = function () {
      LoadingInstance.isShow = false
    }
  }
}

我们首先将组件变成一个构造函数，再用构造函数创建实例对象，接着将对象挂载到界面上。install方法可以接受两个参数，一个是vue对象，一个是传入的参数。如此一来，便不需要导入vue对象，不需要借助标签展示（因为组件封装成了函数，挂载到了页面上，它一直存在）。将此loading的显示与隐藏设置给vue的全局和实例方法。通过外界调用，来实现组件的显示和隐藏。
而传入的参数则可替换想要替换的内容。

所以插件的特点就是对组件或要实现的功能的进一步拓展摆脱其原本的一些局限性。