关于ant-design-vue的问题 发现布局内部属性不生效

Question

今天刚使用antd 遇到一些问题 本人新手这个问题想了好久没解决，是需要引入一些其他东西吗
import { Button,Layout} from 'ant-design-vue';
Vue.component(Button.name, Button)
Vue.component(Layout.name, Layout)
这一段代码不生效 搬官网的

<a-layout>
  <a-layout-sider>Sider</a-layout-sider>
  <a-layout>
    <a-layout-header>Header</a-layout-header>
    <a-layout-content>Content</a-layout-content>
    <a-layout-footer>Footer</a-layout-footer>
  </a-layout>
</a-layout>
报错提示是：Unknown custom element: <a-layout-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

这个是我的页面(代码是直接copy官网的)

这是官网页面

Answer 1

还需要在main.js中注册内部属性

Vue.component(Layout.Header.name, Layout.Header);
Vue.component(Layout.Content.name, Layout.Content);
Vue.component(Layout.Footer.name, Layout.Footer);
Vue.component(Layout.Sider.name, Layout.Sider);

Answer 2

是否已配置按需加载
在 vue-cli 中使用

Answer 3

在按需引入中，写法如下：

import { Layout } from 'ant-design-vue'

const { Header, Content, Footer } = Layout
export default {
  name: 'Index',
  components: {
    Layout,
    Header,
    Content,
    Footer
  }
}

Password等标签也如上从Input中提取出来使用，实话讲我也没在文档中找到说明使用它们的方法，antd-design-vue用起来有点点难受。