[JavaScript知识库]用vue install 写一个全局插件

创建一个插件文件夹，里面包含.vue(模板文件)和.js文件（vue.use 注册全局组件需要用到）

1.模板准备

<template>
  <div>
    <h1> loading</h1>
  </div>
</template>

2.js文件准备好一个install方法，并且导出。

安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

import Loading from './' // 引入模板
export default {
  install(Vue) { // install 方法在
    function myLoading() {
      var _loading = Vue.extend(Loading)
      const instance = new _loading({
        el: document.createElement('div')
      })
      console.log(instance) // 这里可以得到引入的组件实例
      document.body.appendChild(instance.$el)
    }
    Vue.prototype.$myLoading = myLoading //将这个方法挂到全局
  }
}

myLoading方法已经注册到全局，可以直接用this.$myLoading调用。
插件的原理其实就是注册全局方法，只是书写方式不一样，和写普通组件类似。

export default {
	install(Vue){
		myfn(){}
		Vue.component() // 全局注册组件
		Vue.prototype.$myfn = myfn // 全局注册方法 
	}
}