在vue-cli3中使用axios获取本地json操作

在Vue CLI 3中使用axios获取本地JSON的操作步骤如下：

1. 安装依赖

在项目根目录下，使用以下命令安装axios和Vue CLI 3自带的webpack-dev-server：

npm install axios
npm install webpack-dev-server

2. 创建本地JSON文件

在项目的public文件夹下创建一个json文件，例如：

// public/my_data.json

{
  "name": "小明",
  "age": 18,
  "gender": "male"
}

3. 使用axios获取JSON数据

在Vue组件中，可以通过以下方式使用axios获取本地JSON数据：

<template>
  <div>
    <h1>{{ name }}</h1>
    <p>{{ age }}</p>
    <p>{{ gender }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      age: '',
      gender: ''
    }
  },

  mounted() {
    let vm = this;

    axios.get('/my_data.json')
      .then(function (response) {
        vm.name = response.data.name;
        vm.age = response.data.age;
        vm.gender = response.data.gender;
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}
</script>

上述代码中，我们使用了axios的get方法，来获取public文件夹下的my_data.json文件。在请求成功后，将获取到的数据赋值给Vue实例的data属性，从而使页面中的数据渲染出来。

示例1：使用vue-cli3+axios获取远程JSON数据

有时，我们需要获取远程服务器上的JSON数据，在Vue CLI 3中，同样可以使用axios来完成该操作。例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in itemList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '',
      itemList: []
    }
  },

  mounted() {
    let vm = this;

    axios.get('https://api.example.com/items')
      .then(function (response) {
        vm.title = response.data.title;
        vm.itemList = response.data.items;
      })
      .catch(function (error) {
        console.log(error);
      });
  }
}
</script>

上述代码中，我们使用了axios的get方法，来获取远程服务器上的JSON数据。在请求成功后，将获取到的数据赋值给Vue实例的data属性，从而使页面中的数据渲染出来。

示例2：使用async/await获取JSON数据

我们还可以使用ECMAScript 2017中引入的async/await语法，来简化axios请求。例如：

<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="item in itemList" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      title: '',
      itemList: []
    }
  },

  async mounted() {
    let response = await axios.get('https://api.example.com/items');

    this.title = response.data.title;
    this.itemList = response.data.items;
  }
}
</script>

上述代码中，我们使用了async/await语法，将axios的请求转换为异步操作，并等待请求的响应。在响应成功后，直接将响应的数据赋值给Vue实例的data属性，从而使页面中的数据渲染出来。