版权声明:前端菜鸟--人间草木所有 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)
})
}
}