添加基本样式，管理员页面完成导航

src/App.vue

@@ -12,6 +12,9 @@ export default {
 </script>
 
 <style>
+html,body{
+  height: 100%;
+}
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -19,6 +22,7 @@ export default {
   text-align: center;
   color: #2c3e50;
   min-width: 570px;
-  margin: 50px auto 0;
+  margin: 0 auto;
+  height: 100%;
 }
 </style>

src/assets/css/base.css

@@ -0,0 +1,154 @@
+/*!
+ * @名称：base.css
+ * @功能：1、重设浏览器默认样式
+ *       2、设置通用原子类
+ */
+/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
+html {
+    /*background:white;*/
+    color:black;
+}
+
+/* 内外边距通常让各个浏览器样式的表现位置不同 */
+body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
+    margin:0;
+    padding:0;
+}
+*{
+    box-sizing: border-box;
+}
+/* 要注意表单元素并不继承父级 font 的问题 */
+body,button,input,select,textarea {
+    font:12px Microsoft YaHei,\5b8b\4f53,arial,sans-serif;
+}
+input,select,textarea {
+    font-size:100%;
+}
+/* 去掉 table cell 的边距并让其边重合 */
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+/* ie bug：th 不继承 text-align */
+th {
+    text-align:inherit;
+}
+/* 去除默认边框 */
+fieldset,img {
+    border:none;
+}
+/* ie6 7 8(q) bug 显示为行内表现 */
+iframe {
+    display:block;
+}
+.el-select{
+    width: 100%;
+}
+/* 去掉 firefox 下此元素的边框 */
+abbr,acronym {
+    border:none;
+    font-variant:normal;
+}
+/* 一致的 del 样式 */
+del {
+    text-decoration:line-through;
+}
+address,caption,cite,code,dfn,em,th,var {
+    font-style:normal;
+    font-weight:500;
+}
+/* 去掉列表前的标识，li 会继承 */
+ol,ul {
+    list-style:none;
+}
+/* 对齐是排版最重要的因素，别让什么都居中 */
+caption,th {
+    text-align:left;
+}
+/* 来自yahoo，让标题都自定义，适应多个系统应用 */
+h1,h2,h3,h4,h5,h6 {
+    font-size:100%;
+    font-weight:500;
+}
+q:before,q:after {
+    content:'';
+}
+/* 统一上标和下标 */
+sub,sup {
+    font-size:75%;
+    line-height:0;
+    position:relative;
+    vertical-align:baseline;
+}
+sup {
+    top:-0.5em;
+}
+sub {
+    bottom:-0.25em;
+}
+/* 让链接在 hover 状态下不显示下划线 */
+a{
+    color:#333
+}
+a:hover,a:visited,a:active,a:link {
+    text-decoration: none!important
+}
+/* 默认不显示下划线，保持页面简洁 */
+ins,a {
+    text-decoration:none;
+}
+/* 去除 ie6 & ie7 焦点点状线 */
+a:focus,*:focus {
+    outline:none;
+}
+/* 清除浮动 */
+.clearfix:before,.clearfix:after {
+    content:"";
+    display:table;
+}
+.clearfix:after {
+    clear:both;
+    overflow:hidden;
+}
+.clearfix {
+    zoom:1; /* for ie6 & ie7 */
+}
+.clear {
+    clear:both;
+    display:block;
+    font-size:0;
+    height:0;
+    line-height:0;
+    overflow:hidden;
+}
+.el-loading-mask{
+        background-color: rgba(255,255,255,1);
+    }
+/* 设置显示和隐藏，通常用来与 js 配合 */
+.hide {
+    display:none;
+}
+.block {
+    display:block;
+}
+/* 设置浮动，减少浮动带来的 bug */
+.fl,.fr {
+    display:inline;
+}
+.fl {
+    float:left;
+}
+.fr {
+    float:right;
+}
+
+
+@font-face {
+  font-family: 'iconfont';  /* project id 309225 */
+  src: url('//at.alicdn.com/t/font_yfai6dljpl2tke29.eot');
+  src: url('//at.alicdn.com/t/font_yfai6dljpl2tke29.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_yfai6dljpl2tke29.woff') format('woff'),
+  url('//at.alicdn.com/t/font_yfai6dljpl2tke29.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_yfai6dljpl2tke29.svg#iconfont') format('svg');
+}
+

src/main.js

@@ -8,6 +8,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import Api from "./api/config.js"
 import store from './store/store.js'
 import axios from 'axios'
+import './assets/css/base.css'
 require('./mock/index.js')//此部分引入的是我们所编写的mockjs文档
 
 Vue.config.productionTip = false

src/view/admin/Admin.vue

@@ -1,5 +1,30 @@
 <template>
-
+	<div class="admin-wrap">
+		<el-container>
+		  <el-aside width="200px">
+		  	<el-menu
+		      default-active="1-1"
+		      class="el-menu-vertical-demo"
+		      background-color="#545c64"
+		      text-color="#fff"
+		      active-text-color="#3eb983">
+		      <el-submenu index="1">
+		        <template slot="title">
+		          <i class="el-icon-tickets"></i>
+		          <span>账号管理</span>
+		        </template>
+		        <el-menu-item-group>
+		          <el-menu-item index="1-1">商家账号管理</el-menu-item>
+		          <el-menu-item index="1-2">买家账号管理</el-menu-item>
+		        </el-menu-item-group>
+		      </el-submenu>
+		    </el-menu>
+		  </el-aside>
+		  <el-main>
+				<h5>商家账户管理</h5>
+		  </el-main>
+		</el-container>
+	</div>
 </template>
 
 <script>
@@ -7,5 +32,16 @@
 </script>
 
 <style scoped>
-	
+	.admin-wrap{
+		height: 100%;
+	}
+</style>
+
+<style>
+	.el-container{
+		height: 100%;
+	}
+	.el-menu{
+		height: 100%;
+	}
 </style>