vue 全局引入axios

1.安裝
網上有多種方法,這裏使用npm的安裝方式:

npm install axios

出現如下表示安裝完成:
在這裏插入圖片描述
2.全局註冊axios

main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

//在main.js加上以下兩句
import axios from 'axios'  //引入axios
Vue.prototype.axios = axios  //全局註冊,任何組件都能直接使用

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

到這裏就引入完畢了

3.組件中使用

在任意組件,直接使用this.axios	
<template>
    <div>
        <button @click="btn">點擊獲取數據</button>
    </div>
</template>
<script>
export default {
    methods:{
        btn(){
            this.axios.get('https://easy-mock.com/mock/5bff9732ec952807e818415e/admin/team')
            .then((response) => {
                console.log(response);
            })
            .catch((error) => {
                console.log(error);
            });
        }
    }
}
</script>

打印結果:

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章