add layout component with header, content, sider and footer

examples/app.vue

@@ -6,13 +6,14 @@ nav { margin-bottom: 40px; }
 ul { display: flex; flex-wrap: wrap; }
 li { display: inline-block; }
 li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
-.container{ padding: 10px 40px; }
+.container{ padding: 10px 40px 0; }
 .v-link-active { color: #bbb; }
 </style>
 <template>
     <div class="container">
         <nav>
             <ul>
+                <li><router-link to="/layout">Layout</router-link></li>
                 <li><router-link to="/affix">Affix</router-link></li>
                 <li><router-link to="/grid">Grid</router-link></li>
                 <li><router-link to="/button">Button</router-link></li>

examples/main.js

@@ -17,6 +17,10 @@ Vue.config.debug = true;
 // 路由配置
 const router = new VueRouter({
     routes: [
+        {
+            path: '/layout',
+            component: require('./routers/layout.vue')
+        },
         {
             path: '/affix',
             component: require('./routers/affix.vue')

examples/routers/layout.vue

@@ -0,0 +1,61 @@
+<template>
+    <div class="layout-demo-con">
+        <Layout :style="{minHeight: '100vh'}">
+            <Sider 
+                v-model="isCollapsed"
+                collapsed-width="0" 
+                breakpoint="md" 
+                ref="side"
+                width="200">
+                <Menu width="auto" theme="dark" active-name="1">
+                    <MenuGroup title="内容管理">
+                        <MenuItem name="1">
+                            <Icon type="document-text"></Icon>
+                            文章管理
+                        </MenuItem>
+                        <MenuItem name="2">
+                            <Icon type="chatbubbles"></Icon>
+                            评论管理
+                        </MenuItem>
+                    </MenuGroup>
+                    <MenuGroup title="统计分析">
+                        <MenuItem name="3">
+                            <Icon type="heart"></Icon>
+                            用户留存
+                        </MenuItem>
+                        <MenuItem name="4">
+                            <Icon type="heart-broken"></Icon>
+                            流失用户
+                        </MenuItem>
+                    </MenuGroup>
+                </Menu>
+            </Sider>
+            <Layout class-name="test-class">
+                <Header :style="{background: '#eee'}"><Button @click="toggleCollapse">菜单</Button></Header>
+                <Content :style="{background:'#FFCF9E'}">
+                    <p v-for="i in 100" :key="i">{{ i }}</p>
+                </Content>
+                <Footer>sdfsdsdfsdfs</Footer>
+            </Layout>
+        </Layout>
+    </div>
+</template>
+<script>
+export default {
+    data () {
+        return {
+            isCollapsed: false
+        };
+    },
+    methods: {
+        toggleCollapse () {
+            this.$refs.side.toggleCollapse();
+        }
+    }
+};
+</script>
+<style lang="less" scoped>
+    .layout-demo-con{
+        height: 100%;
+    }
+</style>