如何用vue引入json

在Vue中引入JSON文件，可以说是一件相对简单的事情，但也是每个Vue开发者必须的技能，就让我带你一步步了解如何在Vue项目中轻松引入JSON文件。

我们需要一个JSON文件，假设我们有一个名为data.json的文件，内容如下：

{
  "name": "Vue",
  "version": "3.x",
  "description": "渐进式JavaScript框架"
}

这个文件包含了Vue的一些基本信息，我们将在Vue项目中使用它。

我们需要在Vue项目中引入这个JSON文件，这里有两种主要的方法：使用require或import。

方法一：使用`require`

在Vue组件中，我们可以使用require来引入JSON文件，这种方式适用于Vue 2.x和Vue 3.x，以下是具体步骤：

1、在组件的created或mounted生命周期钩子中使用require引入JSON文件。

export default {
  data() {
    return {
      info: {}
    };
  },
  created() {
    const info = require('@/assets/data.json');
    this.info = info;
  }
}

在这个例子中，我们首先定义了一个名为info的数据属性，然后在created钩子中使用require引入data.json文件，并将其赋值给info。

2、在模板中使用info数据。

<template>
  <div>
    <p>Name: {{ info.name }}</p>
    <p>Version: {{ info.version }}</p>
    <p>Description: {{ info.description }}</p>
  </div>
</template>

这样，我们就可以在Vue模板中显示JSON文件中的数据了。

方法二：使用`import`

从Vue 3.x开始，我们可以使用import来引入JSON文件，这种方式更加现代化，也更符合ES6的模块化规范，以下是具体步骤：

1、在组件中使用import引入JSON文件。

import info from '@/assets/data.json';
export default {
  data() {
    return {
      info
    };
  }
}

在这个例子中，我们直接使用import引入data.json文件，并将其赋值给info数据属性。

2、在模板中使用info数据。

<template>
  <div>
    <p>Name: {{ info.name }}</p>
    <p>Version: {{ info.version }}</p>
    <p>Description: {{ info.description }}</p>
  </div>
</template>

这样，我们就可以在Vue模板中显示JSON文件中的数据了。