图鸟模板-官网：基于Vue 3的前端开发新篇章

以下是一个简单的Vue 3组件示例，用于演示如何使用Vue 3创建一个简单的图鸟模板页面：

<template>
  <div class="container">
    <div class="header">
      <h1>图鸟模板 - 官网</h1>
    </div>
    <div class="content">
      <!-- 内容区域 -->
      <p>这里是图鸟模板官网的内容</p>
    </div>
    <div class="footer">
      <p>版权所有 © 图鸟模板官网 2023</p>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'WebsiteTemplate',
  // 其他组件选项
};
</script>
 
<style scoped>
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 960px;
  margin: auto;
}
 
.header, .footer {
  padding: 10px;
  text-align: center;
}
 
.content {
  flex: 1;
  padding: 20px;
}
</style>

这个Vue 3组件展示了如何使用单文件组件(.vue文件)来构建页面布局。它使用了<template>来定义视图布局，<script>来定义组件逻辑，以及<style scoped>来定义组件的CSS样式，使得样式只作用于当前组件，不会影响到其他组件或页面的全局样式。