vue3 ts setup antd layout

首先，需要安装 `ant-design-vue` 和 `@ant-design/icons-vue` 依赖：

npm install ant-design-vue @ant-design/icons-vue --save

然后在 `main.ts` 中引入 `antd` 的样式：

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(Antd).mount('#app');

接下来，我们可以使用 `defineComponent` 和 `ref` 来创建一个 `Layout` 组件：

<template>
  <a-layout>
    <a-layout-sider v-model:collapsed="collapsed">
      Sider
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        Header
      </a-layout-header>
      <a-layout-content>
        <slot/>
      </a-layout-content>
      <a-layout-footer>
        Footer
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'Layout',
  setup() {
    const collapsed = ref(false);

    return {
      collapsed,
    };
  },
});
</script>

现在，我们就可以在组件中使用我们定义的 `Layout` 组件了：

<template>
  <Layout>
    <div>Hello World!</div>
  </Layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Layout from './components/Layout.vue';

export default defineComponent({
  components: {
    Layout,
  },
});
</script>

以上代码是一个简单的 `Layout` 组件，包含了 `Sider`、`Header`、`Content` 和 `Footer` 四个部分，可以通过 `collapsed` 控制 `Sider` 的展开和收起。