axios 官網：axios中文網

方式一：將 axios 綁定到 vue 原型上

安裝：

npm install axios

main.js中導入并綁定

import Vue from 'vue' import App from './App' import axios from 'axios'Vue.prototype.$axios = axiosnew Vue({el: '#app',components: { App },template: '<App/>' })

使用：

<template><div id="app"><button @click="handleClick">點擊</button></div> </template><script> export default {name: "App",methods: {handleClick() {// this.$axios({// method: "get",// url: "http://localhost:8081/hello"// }).then(res => {// console.log(res.data);// });this.$axios.get("http://localhost:8081/hello").then(response => {console.log(response.data);});}} }; </script><style></style>

方式二：使用 vue-axios

安裝：

npm install --save axios vue-axios

main.js 中安裝

import Vue from 'vue' import App from './App'import axios from 'axios' import VueAxios from 'vue-axios' // VueAxios 與 axios 的位置不能交換，否則出現 TypeError: Cannot read property 'protocol' of undefined Vue.use( VueAxios , axios)new Vue({el: '#app',components: { App },template: '<App/>' })

使用：

<template><div id="app"><button @click="handleClick">點擊</button></div> </template><script> export default {name: "App",methods: {handleClick() {// this.axios({// method: "get",// url: "http://localhost:8081/hello"// }).then(res => {// console.log(res.data);// });this.axios.get("http://localhost:8081/hello").then(response => {console.log(response.data);});}} }; </script><style></style>

補充：發送 post 請求

this.axios({method: "post",url: "http://localhost:8081/hello",data: {username: "admin",password: "123"} }).then((res)=>{console.log(res.data); })

后端 springboot 代碼

@RestController @CrossOrigin public class HelloController {@RequestMapping("hello")public String hello(@RequestBody Map<String, String> username) {System.out.println(username);return "Hello world!";} }

結果：

---

---

---

總結

以上是生活随笔為你收集整理的VueCli 中安装 axios的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。