关于vue-cli:Vue-Cli引入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="hello">点击</button>  </div></template><script>export default {  name: "App",  methods: {    hello() {    //   this.$axios({    //     method: "get",    //     url: "http://localhost:1313/hello"    //   }).then(res => {    //     console.log(res.data);    //   });      this.$axios.get("http://localhost:1313/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 undefinedVue.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);})