【引入vue公共组件layout】

组件layout】"/>

【引入vue公共组件layout】

1、效果展示

2、注册

a）全局注册
在router下index.js里

import layout from '@/layout'

在main.js里

import Vue from 'vue'
import App from './App.vue'import { Layout, Icon, Menu, Breadcrumb } from 'ant-design-vue' // 引入 Vueponent(Icon.name, Icon)        // 注册Vueponent(Layout.name, Layout);
Vueponent(Layout.Header.name, Layout.Header);
Vueponent(Layout.Content.name, Layout.Content);
Vueponent(Layout.Footer.name, Layout.Footer);
Vueponent(Layout.Sider.name, Layout.Sider);Vueponent(Menu.name, Menu);
Vueponent(Menu.SubMenu.name, Menu.SubMenu);
Vueponent(Menu.Item.name, Menu.Item);Vueponent(Breadcrumb.name, Breadcrumb);
Vueponent(Breadcrumb.Item.name, Breadcrumb.Item)Vue.config.productionTip = false;new Vue({render: h => h(App),
}).$mount('#app')

在App.vue里

<template><div id="app"><a-layout id="components-layout-demo-top-side"><a-layout-header class="header"><div class="logo" /><a-menutheme="dark"mode="horizontal":default-selected-keys="['2']":style="{ lineHeight: '64px' }"><a-menu-item key="1">nav 1</a-menu-item><a-menu-item key="2">nav 2</a-menu-item><a-menu-item key="3">nav 3</a-menu-item></a-menu></a-layout-header><a-layout-content style="padding: 0 50px"><a-breadcrumb style="margin: 16px 0"><a-breadcrumb-item>Home</a-breadcrumb-item><a-breadcrumb-item>List</a-breadcrumb-item><a-breadcrumb-item>App</a-breadcrumb-item></a-breadcrumb><a-layout style="padding: 24px 0; background: #fff"><a-layout-sider width="200" style="background: #fff"><a-menumode="inline":default-selected-keys="['1']":default-open-keys="['sub1']"style="height: 100%"><a-sub-menu key="sub1"><span slot="title"><a-icon type="user" />subnav 1</span><a-menu-item key="1">option1</a-menu-item><a-menu-item key="2">option2</a-menu-item><a-menu-item key="3">option3</a-menu-item><a-menu-item key="4">option4</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><span slot="title"><a-icon type="laptop" />subnav 2</span><a-menu-item key="5">option5</a-menu-item><a-menu-item key="6">option6</a-menu-item><a-menu-item key="7">option7</a-menu-item><a-menu-item key="8">option8</a-menu-item></a-sub-menu><a-sub-menu key="sub3"><span slot="title"><a-icon type="notification" />subnav 3</span><a-menu-item key="9">option9</a-menu-item><a-menu-item key="10">option10</a-menu-item><a-menu-item key="11">option11</a-menu-item><a-menu-item key="12">option12</a-menu-item></a-sub-menu></a-menu></a-layout-sider><a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">Content</a-layout-content></a-layout></a-layout-content><a-layout-footer style="text-align: center">Ant Design ©2018 Created by Ant UED</a-layout-footer></a-layout></div>
</template><script>
export default {name: 'App',data() {return {collapsed: false,};},
}
</script><style>
#components-layout-demo-top-side .logo {width: 120px;height: 31px;background: rgba(255, 255, 255, 0.2);margin: 16px 28px 16px 0;float: left;
}
</style>

b）全局注册