如何在vue中使用jsonserver调数据

要在Vue中使用JSON Server调用数据，您需要进行以下步骤：

1. 安装JSON Server

在终端中运行以下命令来安装JSON Server：

npm install -g json-server

2. 创建JSON数据文件

创建一个名为 `db.json` 的文件并输入数据。例如，以下数据表示一些用户信息：

{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john.doe@example.com" },
    { "id": 2, "name": "Jane Doe", "email": "jane.doe@example.com" }
  ]
}

3. 启动JSON Server

在终端中进入文件所在目录并运行以下命令来启动JSON Server：

json-server --watch db.json

这会在本地 `http://localhost:3000` 启动JSON Server，并且您可以在浏览器中查看数据。

4. 在Vue中使用axios获取JSON数据

安装 `axios`：

npm install axios

在Vue组件中，您可以使用以下代码调用JSON数据：

import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  mounted() {
    axios.get('http://localhost:3000/users')
      .then(response => {
        this.users = response.data
      })
  }
}

这将获取JSON Server上的用户数据，并将其分配给 `users` 数据属性。您可以在模板中使用 `v-for` 来渲染数据。