Vue-cli项目获取本地json文件数据的实例

下面是我给出的Vue-cli项目获取本地json文件数据的完整攻略：

1. 创建Vue-cli项目

首先我们要创建一个Vue-cli项目。具体的步骤可以参考Vue-cli官方文档。

2. 创建本地JSON文件

接下来我们需要创建本地JSON文件用于存储我们的数据。在项目目录下创建一个data目录，再在data目录下创建一个example.json文件，用来存储我们的数据。

{
  "users": [
    {
      "id": 1,
      "name": "张三",
      "age": 20
    },
    {
      "id": 2,
      "name": "李四",
      "age": 25
    },
    {
      "id": 3,
      "name": "王五",
      "age": 30
    }
  ]
}

3. 安装 axios

我们需要安装axios，用来请求本地的JSON文件。

npm install axios --save

4. 创建Vue组件

接下来，我们需要创建一个Vue组件来展示我们的数据。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Example',
  data() {
    return {
      users: [],
    };
  },
  created() {
    axios.get('/data/example.json').then((response) => {
      this.users = response.data.users;
    });
  },
};
</script>

在上面的代码中，我们首先导入了axios。然后，我们定义了一个Example组件，并在data中定义了一个空的users数组。

接着，在created钩子函数中，我们使用axios向本地的JSON文件发送一个get请求，并将返回的数据存储到users数组中。

最后，在模板中，我们使用v-for指令循环渲染users数组中的数据。

5. 添加路由

我们需要在Vue-router中添加一个路由，来展示我们的Example组件。

import Vue from 'vue';
import Router from 'vue-router';
import Example from './components/Example';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Example',
      component: Example,
    },
  ],
});

6. 运行项目

最后，我们运行项目，打开浏览器，访问http://localhost:8080，就能看到我们刚才创建的Example组件，以及我们读取的本地JSON文件中的数据。

另外，下面我提供了一个完整的示例代码，供您参考：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Example',
  data() {
    return {
      users: [],
    };
  },
  created() {
    axios.get('/data/example.json').then((response) => {
      this.users = response.data.users;
    });
  },
};
</script>