在vue项目中引入axios，并像使用vue-router那样使用axios

        我在标题中所说的像使用vue-router那样使用axios，就是在Vue.prototype中加入$axios。

Object.defineProperty(Vue.prototype, '$axios', {
  get () { return axios }
})

        下面我会介绍一下我解决这个问题的路程，感兴趣的可以看一下。

        axios不像vue-resoures那样，是vue的插件，可以直接use之后就可以全局使用，由于我是最近开始接触vue的，所以也想写写vue的插件，就想着把axios封装成插件，万万没想到啊，就是这个想法让我在解决这个问题上兜了一个大圈。

        我首先参考了vuex的源码写出了如下代码：

import axios from 'axios'

class green {
	constructor (m_axios) {
		this.m_axios = axios;
	}

	printSomething () {
		console.log('something...')
	}
}

function install (Vue) {
	Vue.mixin({
	    beforeCreate: function () {
	        const options = this.$options
	        // green injection
	        if (options.green) {
	          this.$green = typeof options.green === 'function'
	            ? options.green()
	            : options.green
	        } else if (options.parent && options.parent.$green) {
	          this.$green = options.parent.$green
	        }
	    }
	})
}

export default {
	green,
	install
}

这样就可以通过this.$green.axios.get(api)来使用时axios。不过严谨的我怎么能允许$green的存在，太碍眼了，我就又去看了一下vue-router的源码，发现了解决问题的关键，部分关键代码如下：

  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

原来在Vue的原型上加属性就可以了。。。

        总结一下：虽然是最初解决问题方向不太正确，导致绕了点路，不过还是因为自己的基础知识掌握的不扎实，还是得多看书啊。