app.vue

<template>
  <div id="app">
    <!-- 这里是模板部分，用于定义页面的结构和布局 -->
    <header>
      <h1>{{ title }}</h1>
    </header>
    <main>
      <p>{{ message }}</p>
    </main>
  </div>
</template>

<script>
// 这里是脚本部分，用于定义组件的逻辑和数据
export default {
  name: 'App',
  data() {
    return {
      title: 'Welcome to My App',
      message: 'This is a simple Vue.js application.'
    }
  }
}
</script>

<style scoped>
/* 这里是样式部分，用于定义组件的样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

header {
  background-color: #42b983;
  padding: 20px;
  color: white;
}
</style>

解释说明

1. Template 部分:

   • 使用了 <div id="app"> 作为根元素。
   • 包含一个 <header> 和一个 <main> 标签，分别用于显示标题和消息。

2. Script 部分:

   • export default 定义了一个 Vue 组件。
   • name: 'App' 指定了组件的名称。
   • data() 函数返回一个对象，包含组件的状态（即 title 和 message）。

3. Style 部分:

   • 使用了 scoped 属性，确保样式仅应用于当前组件。
   • 定义了一些基本的样式，如字体、颜色和背景色等。