vue项目中axios的封装

如果axios不是插件可以写成下面这样的形式

import axios from 'axios'
Vue.prototype.$http = axios

原理就是通过prototype给Vue实例增加一个方法，这样axios就是Vue实例下的一个方法了，使用时我们就可以this.$http来使用了($http是自定义的方法，名字可以随便取)

但是在vue项目中我们想要像使用element，router等插件一样进行导入和使用时会发现，axios不是一个插件，不能通过Vue.use(axios)使用

解决办法我们可以通过vue官网上提供的开发插件方法对axios来进行封装：

1. vue官网提供的开发插件方法
2. 图中第4个方法正正是我们想要的，给实例添加一个方法 ， 1，此时我们新建一个文件专门写开发插件功能的，
   2，载入代码，缺什么补什么，给MyPlugin添加一个对象，MyPlugin可命名成我们想要的名字
   3，统一风格，把install方法改写成箭头函数，参数Vue必选项，其他参数可写可不写
   4，添加实例方法，引入axios，import axios from 'axios'
   5 export default MyHttpServer导出
   6，在main.js中引入MyHttpServer插件

import MyHttpServer from '@/components/plugins/https.js' // 导入封装的axios

7，通过

Vue.use(MyHttpServer) // 使用MyHttpServer插件

封装完整代码如下；

// axios插件模块
import axios from 'axios'
const MyHttpServer = {}
MyHttpServer.install = function (Vue) {
  axios.defaults.baseURL = 'http://localhost:8888/api/private/v1/'
  // 4. 添加实例方法
  Vue.prototype.$http = axios
}
export default MyHttpServer