vue读取json文件

你可以使用Vue中的内置方法或Vue插件来读取JSON文件。下面是两种常用的方法：

1. 使用Vue的内置方法：
在Vue组件中使用`axios`或`fetch`等工具库来发送HTTP请求并获取JSON数据。首先，你需要安装相应的库，例如axios，然后在组件中引入并发送请求。以下是一个简单的示例：

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

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: [],
    };
  },
  mounted() {
    axios.get('data.json')
      .then(response => {
        this.items = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};
</script>

在上面的示例中，我们在组件的`mounted`生命周期钩子中发送了一个GET请求，并将返回的JSON数据存储在`items`数组中。然后，我们可以在模板中使用`v-for`指令来遍历并显示数据。

2. 使用Vue插件：
你可以使用一些Vue插件来简化读取JSON文件的过程，例如`vue-json-csv`。这个插件提供了一个自定义指令，可以直接在模板中使用来读取和展示JSON数据。以下是一个示例：

<template>
  <div v-json-csv:src="jsonUrl">
    <ul>
      <li v-for="(item, index) in $jsonCSV.data" :key="index">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import VueJsonCsv from 'vue-json-csv';

export default {
  directives: {
    jsonCsv: VueJsonCsv,
  },
  data() {
    return {
      jsonUrl: 'data.json',
    };
  },
};
</script>

在上面的示例中，我们使用了`v-json-csv`指令来读取JSON数据，并将数据存储在`$jsonCSV.data`中。然后，我们可以在模板中使用`v-for`指令来遍历并显示数据。

无论你选择哪种方法，确保在Vue组件中正确引入相应的库或插件，并根据你的需求进行相应的配置。