Vue.js中如何使用单文件组件？

Vue.js中的单文件组件是一种将组件的模板、样式和逻辑放在同一个文件中进行管理的方式。使用单文件组件可以提高代码的可维护性和可读性。在单文件组件中，通常使用Vue.js的模板语法来定义组件的模板，使用CSS来定义组件的样式，使用JavaScript来定义组件的逻辑。单文件组件通常以.vue文件的形式存在。

下面是一个简单的单文件组件的例子：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello',
      message: 'Welcome to my app'
    }
  }
}
</script>

<style>
h1 {
  color: red;
}
p {
  font-size: 18px;
}
</style>

在上面的例子中，使用”template”标签来定义组件的模板，使用”script”标签来定义组件的逻辑，使用”style”标签来定义组件的样式。
通过export default将组件对象导出，从而可以在其他组件中引用这个单文件组件。