vue里的axios如何获取本地json数据

要在Vue中使用Axios读取本地JSON文件，需要按照以下步骤进行操作：

1. 安装Axios

在Vue项目中使用Axios，需要安装Axios。可在终端中执行以下命令进行安装：

npm install axios --save

1. 创建JSON文件

在src/assets目录中创建名为data.json的文件，并写入以下内容：

{
  "name": "Vue",
  "description": "A progressive framework for building user interfaces.",
  "website": "https://vuejs.org/",
  "version": "2.6.11"
}

1. 在Vue组件中引入Axios

在Vue组件的script标签中引入Axios，并定义变量来保存JSON文件的数据。示例代码如下：

<template>
  <div>
    <h1>{{ data.name }}</h1>
    <p>{{ data.description }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'MyComponent',
  data () {
    return {
      data: {}
    }
  },
  created () {
    axios.get('/assets/data.json')
      .then(response => {
        this.data = response.data
      })
  }
}
</script>

首先，import axios from 'axios'用于引入Axios。在组件的created钩子函数中，使用axios.get方法来获取JSON数据，并使用.then方法来处理回调函数。

Axios.get()方法使用相对路径'./assets/data.json'，这意味着我们可以访问src/assets/data.json位置。如果您的JSON文件位于另一个位置，请根据需要更改路径。

1. 在浏览器中查看结果

现在可以在浏览器中查看Vue组件中的JSON数据。在终端中执行以下命令来启动Vue应用程序：

npm run serve

然后在浏览器中访问http://localhost:8080，您将看到您的Vue组件正在以美观的方式呈现JSON文件。

另外，也可以通过在Vue组件的script标签中导入JSON文件来读取JSON数据。示例代码如下：

<template>
  <div>
    <h1>{{ data.name }}</h1>
    <p>{{ data.description }}</p>
  </div>
</template>

<script>
import data from '@/assets/data.json'

export default {
  name: 'MyComponent',
  data () {
    return {
      data: data
    }
  }
}
</script>

在这个示例中，我们使用import data from '@/assets/data.json'语句来导入JSON数据。然后将数据存储在组件的data属性中。

最后，这也是个人习惯，可以使用Vue CLI提供的全局API，快速构建项目结构，包括自动安装axios模块。具体步骤如下：

1. 安装Vue CLI

在终端中执行以下命令来安装Vue CLI：

npm install -g @vue/cli

1. 创建Vue项目

通过运行以下命令在终端中创建Vue项目：

vue create my-project

其中my-project是您的项目名称，可以按照您的喜好进行更改。

1. 进入到项目中

在终端中进入到项目目录：

cd my-project

1. 安装Axios

在终端中执行以下命令来安装Axios：

npm install axios --save

1. 编写Vue组件

在src/components目录中创建名为MyComponent.vue的文件，并编写以下代码：

<template>
  <div>
    <h1>{{ data.name }}</h1>
    <p>{{ data.description }}</p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'MyComponent',
  data () {
    return {
      data: {}
    }
  },
  created () {
    axios.get('/assets/data.json')
      .then(response => {
        this.data = response.data
      })
  }
}
</script>

与前面的示例相同，在Vue组件的script标记内，我们通过import axios from 'axios'语句来引入Axios库。这里数据加载方式和之前的示例没有区别。

1. 直接运行项目

在终端中运行以下命令：

npm run serve

现在可以在浏览器中查看Vue组件中的JSON数据。在浏览器中访问http://localhost:8080，您将看到您的Vue组件正在以美观的方式呈现JSON文件。