用vue写一个带json-server的外卖软件的地区页面

好的，以下是一个简单的示例，展示如何用Vue和json-server实现外卖软件的地区页面。

首先，我们需要安装Vue和json-server，可以使用以下命令进行安装：

npm install vue
npm install -g json-server

然后创建一个Vue项目，并在项目目录下创建一个db.json文件作为模拟的后端数据。在db.json文件中，我们可以创建一个areas数组，用来存储不同的地区信息。

接下来，在Vue项目中使用axios库来与json-server进行交互。我们可以在Vue组件中使用mounted钩子函数来获取数据，例如：

<template>
  <div>
    <h1>地区列表</h1>
    <ul>
      <li v-for="item in areas" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      areas: []
    }
  },
  mounted() {
    axios.get('http://localhost:3000/areas')
      .then(response => {
        this.areas = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

这个组件会从json-server的http://localhost:3000/areas接口获取地区数据，并在页面中展示。

最后，我们需要在package.json文件中添加一个start命令来同时启动Vue项目和json-server，例如：

"scripts": {
  "serve": "vue-cli-service serve",
  "start": "concurrently 'npm run serve' 'json-server --watch db.json'"
},

现在我们就可以使用npm start命令来启动项目和json-server了。

以上是一个简单的示例，具体的实现方式可能会有所不同，但是基本的思路是相似的。