vue3 ant design vue

<template>
  <a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>
      <a-button type="primary" @click="handleClick">Click me!</a-button>
    </a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</template>

<script setup>
import { message } from 'ant-design-vue';

const handleClick = () => {
  message.success('Button clicked!');
};
</script>

<style scoped>
/* Add some basic styles */
a-layout {
  min-height: 100vh;
}

a-layout-header, a-layout-footer {
  background: #001529;
  color: white;
  text-align: center;
  line-height: 64px;
}

a-layout-content {
  padding: 20px;
  text-align: center;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 a-layout 组件来创建一个基础的布局结构，包括头部 (a-layout-header)、主体 (a-layout-content) 和底部 (a-layout-footer)。
   • 在主体部分添加了一个按钮 (a-button)，并绑定了点击事件。

2. 脚本部分 (<script setup>):

   • 导入了 message 模块，用于显示消息提示。
   • 定义了一个 handleClick 方法，在按钮点击时调用，并显示一个成功消息。

3. 样式部分 (<style scoped>):

   • 添加了一些基本的样式，确保布局组件有合适的背景色和文本对齐方式。