创建sidebar组件

src/App.vue

@@ -1,23 +1,65 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
+    <Sidebar/>
     <router-view/>
   </div>
 </template>
 
 <script>
+import Sidebar from './components/Sidebar.vue'
+
 export default {
-  name: 'App'
+  name: 'App',
+  components: {
+    Sidebar
+  }
 }
 </script>
 
 <style>
-#app {
+@import '//at.alicdn.com/t/font_496303_kqrjhri8l25d0a4i.css';
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body, #app {
+  height: 100%;
+}
+
++body {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-size: 14px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  background-color: #eee;
+}
+
+a {
+  text-decoration: none;
+  color: #444;
+}
+
+ul, li {
+  list-style: none;
+}
+
+.btn {
+  color: #666;
+  font-size: 12px;
+  padding: 2px 4px;
+  background-color: #fff;
+  box-shadow: 0 0 2px 0 #ccc;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+}
+
+
+#app {
+  display: flex;
+  align-items: stretch;
 }
 </style>

src/components/Sidebar.vue

@@ -0,0 +1,62 @@
+<template>
+  <div id="sidebar">
+    <div class="icons" @click="click">
+      <router-link to="/note/1" title="笔记"><i class="iconfont icon-note"></i></router-link>
+      <router-link to="/notebooks" title="笔记本"><i class="iconfont icon-notebook"></i></router-link>
+      <router-link to="/trash/2" title="回收站"><i class="iconfont icon-trash"></i></router-link>
+    </div>
+    <div class="logout" @click="onLogout">
+      <i class="iconfont icon-logout"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      click() {
+        console.log('点击了')
+      },
+      onLogout() {
+        console.log('登出')
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+#sidebar {
+  position: relative;
+  width: 56px;
+  text-align: center;
+  background-color: #2c333c;
+}
+
+.icons {
+  margin-top: 15px;
+}
+
+.icons a {
+  padding: 6px 0;
+  display: block;
+}
+
+.icons .router-link-active {
+  background-color: #5e6266;
+}
+
+.logout {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+}
+
+.iconfont {
+  color: #fff;
+}
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ import NotebookList from '../components/NotebookList.vue'
 import NoteDetail from '../components/NoteDetail.vue'
 import TashDetail from '../components/TashDetail.vue'
 
+
 Vue.use(Router)
 
 export default new Router({