最近遇到一个问题，在封装了axios之后，每次调用时都需要先引入，这样很麻烦，于是就想能不能添加成全局功能。在vue官方文档中，找到了插件开发一节。
添加实例方法
比如要定义一个fetch插件，用来完成ajax操作。
fetch.js
const install = function (Vue) {
// 通过installed属性判断组件是否注册过
if (install.installed) {
return
}
install.installed = true;
// Object.defineProperties()方法直接在现有的对象上定义新的属性或修改现有属性，并返回该对象
// 即在Vue.prototype上添加了$fetch
Object.defineProperties(Vue.prototype, {
$fetch: {
get() {
return xxx // 这里返回定义的fetch功能
}
}
})
}
export default {
install
}
不理解get()的同学请查阅Object/defineProperties的文档MDN、MSDN
main.js
import Vue from 'vue'
import fetch from 'fetch.js'
// 调用 `fetch.install(Vue)`
Vue.use(fetch)
这样在组件中直接通过this.$fetch就可以调用
添加全局方法
全局方法是，直接添加在vue上，而不是vue.prototype。
fetch.js
const install = function (Vue) {
// 通过installed属性判断组件是否注册过
if (install.installed) {
return
}
install.installed = true;
Vue.$fetch = xxxx
}
export default {
install
}
main.js
import Vue from 'vue'
import fetch from 'fetch.js'
// 调用 `fetch.install(Vue)`
Vue.use(fetch)
此时不可以通过this调用$fetch方法，而必须通过引入vue调用。
可以把$fetch理解成是类的静态方法，通过实例无法调用
