如何与Vue一起使用早午餐

vue create my-project

<template>
  <div>
    <h2>早午餐菜单</h2>
    <ul>
      <li v-for="item in menu" :key="item.id">
        {{ item.name }} - {{ item.price }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        { id: 1, name: '三明治', price: '10元' },
        { id: 2, name: '汉堡包', price: '15元' },
        { id: 3, name: '沙拉', price: '12元' }
      ]
    };
  }
};
</script>

<template>
  <div id="app">
    <BreakfastLunch />
  </div>
</template>

npm run serve