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

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

npm install vue
npm install -g json-server

然后创建一个Vue项目，并在项目目录下创建一个db.json文件作为模拟的后端数据。

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

<template>
  <div>
    <h1>菜单列表</h1>
    <ul>
      <li v-for="item in menu" :key="item.id">{{ item.name }} - {{ item.price }}元</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

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

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

最后，我们需要在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了。

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