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);
      });