diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
new file mode 100644
index 0000000..ff4f289
--- /dev/null
+++ b/src/components/common/Header.vue
@@ -0,0 +1,80 @@
+<template>
+    <div class="header">
+        <div class="logo">后台管理系统</div>
+        <div class="user-info">
+            <el-dropdown trigger="click" @command="handleCommand">
+                <span class="el-dropdown-link">
+                    <img class="user-logo" src="../../../static/img/img.jpg">
+                    {{username}}
+                </span>
+                <el-dropdown-menu slot="dropdown">
+                    <el-dropdown-item command="loginout">退出</el-dropdown-item>
+                </el-dropdown-menu>
+            </el-dropdown>
+        </div>
+    </div>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                name: 'linxin'
+            }
+        },
+        computed:{
+            username(){
+                let username = localStorage.getItem('ms_username');
+                return username ? username : this.name;
+            }
+        },
+        methods:{
+            handleCommand(command) {
+                if(command == 'loginout'){
+                    localStorage.removeItem('ms_username')
+                    this.$router.push('/login');
+                }
+            }
+        }
+    }
+</script>
+<style scoped>
+    .header {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        height: 70px;
+        font-size: 22px;
+        line-height: 70px;
+        color: #fff;
+    }
+    .header .logo{
+        float: left;
+        width:250px;
+        text-align: center;
+    }
+    .user-info {
+        float: right;
+        padding-right: 50px;
+        font-size: 16px;
+        color: #fff;
+    }
+    .user-info .el-dropdown-link{
+        position: relative;
+        display: inline-block;
+        padding-left: 50px;
+        color: #fff;
+        cursor: pointer;
+        vertical-align: middle;
+    }
+    .user-info .user-logo{
+        position: absolute;
+        left:0;
+        top:15px;
+        width:40px;
+        height:40px;
+        border-radius: 50%;
+    }
+    .el-dropdown-menu__item{
+        text-align: center;
+    }
+</style>
diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue
new file mode 100644
index 0000000..f4fc20a
--- /dev/null
+++ b/src/components/common/Sidebar.vue
@@ -0,0 +1,51 @@
+<template>
+    <div class="sidebar">
+        <el-menu :default-active="onRoutes" class="el-menu-vertical-demo" theme="dark" unique-opened router>
+            <el-menu-item index="readme">
+                <i class="el-icon-setting"></i>自述
+            </el-menu-item>
+            <el-submenu index="2">
+                <template slot="title"><i class="el-icon-menu"></i>表格</template>
+                <el-menu-item index="basetable">基础表格</el-menu-item>
+                <el-menu-item index="vuetable">Vue表格组件</el-menu-item>
+            </el-submenu>
+            <el-submenu index="3">
+                <template slot="title"><i class="el-icon-date"></i>表单</template>
+                <el-menu-item index="baseform">基本表单</el-menu-item>
+                <el-menu-item index="vueeditor">编辑器</el-menu-item>
+                <el-menu-item index="markdown">markdown</el-menu-item>
+                <el-menu-item index="upload">文件上传</el-menu-item>
+            </el-submenu>
+            <el-submenu index="4">
+                <template slot="title"><i class="el-icon-star-on"></i>图表</template>
+                <el-menu-item index="basecharts">基础图表</el-menu-item>
+                <el-menu-item index="mixcharts">混合图表</el-menu-item>
+            </el-submenu>
+        </el-menu>
+    </div>
+</template>
+
+<script>
+    export default {
+        computed:{
+            onRoutes(){
+                return this.$route.path.replace('/','');
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    .sidebar{
+        display: block;
+        position: absolute;
+        width: 250px;
+        left: 0;
+        top: 70px;
+        bottom:0;
+        background: #2E363F;
+    }
+    .sidebar > ul {
+        height:100%;
+    }
+</style>
diff --git a/src/components/common/header.vue b/src/components/common/header.vue
index d6977e7..ff4f289 100644
--- a/src/components/common/header.vue
+++ b/src/components/common/header.vue
@@ -14,7 +14,6 @@
         </div>
     </div>
 </template>
-
 <script>
     export default {
         data() {
diff --git a/src/components/common/sidebar.vue b/src/components/common/sidebar.vue
index 5a5cd27..f4fc20a 100644
--- a/src/components/common/sidebar.vue
+++ b/src/components/common/sidebar.vue
@@ -24,6 +24,7 @@
         </el-menu>
     </div>
 </template>
+
 <script>
     export default {
         computed:{
@@ -33,6 +34,7 @@
         }
     }
 </script>
+
 <style scoped>
     .sidebar{
         display: block;