1.创建vue脚手架
vue init webpack demo
2.cd 项目根目录，再安装axios
npm install axios -S
3.在main.js中
调用
Vue.prototype.$http = axios
4.在调用处
5.可以在main.js中做一些配置
6.配置后可以在调用处省略一些代码
补充：vue-cli整合axios的几种方法
Vue这个框架现在在单页面应用方面非常受人欢迎。
基于vue-cli创建的项目怎么样才能更好地处理网络请求？
首选的应该就是axios了
这次给刚接触vue的新手介绍一下axios在vue中如何使用
安装的话自己去官网看
一、不推荐的方法
{
console.log(result)
})
}
}
}
这种方法比较麻瓜哪个文件要用就 import axios from 'axios' ，但是太过繁琐，也不利于维护。
二、网络请求较少
调用时可以通过两种方法
//Vue.$http.get(`url${params}`)
//this.$http.get(`url${params}`)
//但是这样使用会出现一个问题，在单独的js文件中这样做调用不了$http,原因是没有Vue的实例。大多数情况下用这种方法就可以满足大部分需求了
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',router,template: '
三、推荐方法
用方法二已经可以满足大部分需求了，写的时候也比较爽，但是后期如果接口改变，还要一个个去查找修改，会显得很杂乱
这里推荐一种自己平时的做法
{ return axios.get(`${base}/product/info/${params}`) }
//这样写方便管理整个项目的网络请求
//在我们要是用这个请求时比如说getproduct
import {
getproduct
}from '../api/api';
export default {
name: 'HelloWorld',methods: {
getProductList(){
getproduct(this.params).then(result=>{
console.log(result);
})
}
}
}
//注意我们导出的时候用的是export 所以导入的时候必须带{}
总结
以上所述是小编给大家介绍的vue-cli 使用axios的操作方法及整合axios的多种方法。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/30272.html