制作一个显示时间的vue组件。修改app.vue文件，在页面中输出实时显示的日期和时间，并对日期时间进行格式化。程序运行效果如下图所示。

首先，我们可以在 `app.vue` 文件中添加以下代码：

<template>
  <div class="container">
    <h1>Current Time</h1>
    <time-display />
  </div>
</template>

<script>
import TimeDisplay from './components/TimeDisplay.vue'

export default {
  name: 'app',
  components: {
    TimeDisplay
  }
}
</script>

然后，在 `components` 目录下创建一个名为 `TimeDisplay.vue` 的文件，并在其中添加以下代码：

<template>
  <div class="time-display">
    {{ formattedTime }}
  </div>
</template>

<script>
export default {
  name: 'TimeDisplay',
  data() {
    return {
      currentTime: new Date()
    }
  },
  computed: {
    formattedTime() {
      const options = {
        hour: 'numeric',
        minute: 'numeric',
        second: 'numeric',
        hour12: true
      }
      return this.currentTime.toLocaleString('en-US', options)
    }
  },
  mounted() {
    setInterval(() => {
      this.currentTime = new Date()
    }, 1000)
  }
}
</script>

<style>
.time-display {
  font-size: 2em;
  text-align: center;
}
</style>

在上述代码中，我们首先定义了一个名为 `TimeDisplay` 的 Vue 组件，并在其中定义了一个名为 `formattedTime` 的计算属性，它将当前时间格式化为具有 AM/PM 格式的字符串。

我们使用 `setInterval` 函数来每秒钟更新当前时间，以便在组件中实时显示。最后，我们将组件的样式设置为居中对齐，并使用 `font-size` 设置其字体大小。

最后，我们只需要在终端中输入以下命令来运行程序：

npm run serve

然后在浏览器中打开 `http://localhost:8080/`，即可看到我们实时显示的时间组件。