vue中把axios封装成插件（plugins）

版权声明：前端菜鸟--人间草木所有 https://blog.csdn.net/qq_43258252/article/details/86688031

首先你要确保vue环境搭建成功

第一步：

npm 安装axios，文件根目录下安装，指令如下

npm install axios --save //安装到生产环境

第二步：

如何封装插件

首先，创建一个文件。本例中，我将引入一个axios库的插件。我们就把这个文件命名为axios.js吧。

最关键的地方在于，我们需要暴露一个将Vue构造器作为第一个参数的install方法。

在vue项目的 src/ 文件夹下新建一个文件夹为 plugins，然后在 plugins/ 下新建 axios.js文件，写入如下代码

import axios from 'axios'

// 设置基础apiUrl
axios.defaults.baseURL = 'https://www.apiopen.top/'

// 请求拦截 (这里以后写axios请求拦截)

// 响应拦截 (这里以后写axios响应拦截)

export default {
  install: function (Vue) {
    Object.defineProperty(Vue.prototype, '$http', { value: axios })
  }
}

第三步：

在 main.js 中引入 axios 插件

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from './plugins/axios'

Vue.use(axios)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

第四步：

在组件中使用，在每个组件的methods中调用$http命令完成数据请求

  mounted() {
    this.allList() 
  },
  methods: {
    allList() {
      let data = '盗墓笔记'
      this.$http.get(`/novelSearchApi?name=${data}`).then((res) => {
        console.log(res)
      })
    }
  }