vue/cli3 配置 axios

環境同引入element-ui一樣

• vue 2.6.11

• vue/cli 3.11.0

• elementui vue腳手架自動安裝2.4.5

1. 安裝axios插件

vue add axios

2. main.js變化

import Vue from 'vue'
//這一行是新增的代碼
import './plugins/axios'
import App from './App.vue'
import router from './router'
import store from './store'
import './plugins/element.js'
//這里可以設置全局baseURL,從第三行可以看到這種方式是將axios封裝成一個插件引入進來的,在'./plugins/axios.js'中可以看到封裝的代碼,也可以在其中配置baseurl和攔截器等.
Axios.defaults.baseURL = "http://localhost:8080
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

注意:第三行代碼是新增的,表示引入axios,這里是全局導入,在本項目任何地方都可以使用

3. 使用axios

<script>
export default {
  name: "Users",
  components: {},
  data() {
    return {
      tableData: []
    };
  },
  created() {
    axios
      .post("http://localhost:8989/user/ListByParam", {
        pageNum: "1",
        pageSize: "5"
      })
      .then((response) => {
        console.log(response);
        this.tableData = response.data.data.records;
      })
      .catch((error) => {
        console.log(error);
      });
  }
};
</script>

4.如果提示找不到axios,可以嘗試改為

this.axios
      .post("http://localhost:8989/user/ListByParam", {
        pageNum: "1",
        pageSize: "5"
      })
      .then((response) => {
        console.log(response);
        this.tableData = response.data.data.records;
      })
      .catch((error) => {
        console.log(error);
      });