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

最新推荐文章于 2025-06-05 09:20:49 发布

人间草木96

最新推荐文章于 2025-06-05 09:20:49 发布

阅读量4.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：个人总结 vue

本文链接：https://blog.youkuaiyun.com/qq_43258252/article/details/86688031

个人总结同时被 2 个专栏收录

122 篇文章

订阅专栏

vue

42 篇文章

订阅专栏

本文介绍了在Vue项目中如何封装axios为插件的步骤。首先通过npm安装axios，然后在src/plugins目录下创建axios.js，定义install方法并接收Vue构造器。接着在main.js中引入并使用这个插件，最后在组件的methods中调用$http进行数据请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先你要确保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)
      })
    }
  }