finish dashboard template

Author: MagicDev090

build/webpack.base.conf.js

@@ -49,7 +49,7 @@ module.exports = {
     ],
     loaders: [
       {
-        test: /\.scss$/,
+        test: /\.sass$/,
         loaders: ['style', 'css', 'sass']
       },
       {

package.json

@@ -13,7 +13,10 @@
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "vue": "^2.1.0"
+    "element-ui": "^1.1.2",
+    "normalize.css": "^5.0.0",
+    "vue": "^2.1.0",
+    "vue-router": "^2.1.1"
   },
   "devDependencies": {
     "autoprefixer": "^6.4.0",

src/App.vue

@@ -1,22 +1,20 @@
 <template>
   <div id="app">
-    <img src="./assets/logo.png">
-    <hello></hello>
+    <NavMenu></NavMenu>
+    <Container></Container>
   </div>
 </template>
 
 <script>
-import Hello from './components/Hello'
+import './components/common/style.scss'
+import NavMenu from './components/common/NavMenu.vue'
+import Container from './components/common/Container.vue'
 
 export default {
   name: 'app',
   components: {
-    Hello
+    NavMenu,
+    Container
   }
 }
 </script>
-
-<style lang="sass">
-body
-  background: slateblue;
-</style>

src/components/Hello.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="container">
+    <TopBar></TopBar>
+    <transition>
+      <router-view></router-view>
+    </transition>
+  </div>
+</template>
+
+<script>
+import TopBar from './TopBar.vue'
+
+export default {
+  components: {
+    TopBar
+  }
+}
+</script>

src/components/common/Container.vue

@@ -0,0 +1,15 @@
+<template lang="html">
+  <el-menu default-active="1" id="nav-menu" theme="dark">
+    <div class="logo">
+      <router-link to="/">
+        <!--<img src="../../assets/images/logo.svg" />-->
+      </router-link>
+    </div>
+    <el-submenu index="1">
+      <template slot="title"><i class="el-icon-menu"></i>导航一</template>
+      <el-menu-item index="1-1"><router-link to="/page1" class="nav-link">二级导航一</router-link></el-menu-item>
+      <el-menu-item index="1-2"><router-link to="/page2" class="nav-link">二级导航二</router-link></el-menu-item>
+    </el-submenu>
+    <el-menu-item index="2"><router-link to="/page3" class="nav-link"><i class="el-icon-message"></i>导航二</router-link></el-menu-item>
+  </el-menu>
+</template>

src/components/common/NavMenu.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-row class="top-bar">
+    <div class="top-wrapper">
+      <div class="user-area pull-right">
+        <div class="user-avatar">
+          <span class="avatar-img" :style="{ backgroundImage: 'url(' + avatar_url + ')' }"></span>
+          <i class="el-icon-arrow-down"></i>
+          <div class="drop-menu">
+            <ul>
+              <li><i class="iconfont">&#xe603;</i>管理员</li>
+              <li @click="signOut"><i class="iconfont">&#xe602;</i>退出</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <el-col :span="8" class="search-area pull-right">
+        <el-form>
+          <el-form-item>
+            <i class="el-icon-search"></i>
+            <el-input placeholder="搜索"></el-input>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </div>
+  </el-row>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        avatar_url: 'http://img0.imgtn.bdimg.com/it/u=1787407765,2524017231&fm=11&gp=0.jpg'
+      }
+    },
+    methods: {
+      signOut () {
+        console.log('退出登录')
+      }
+    }
+  }
+</script>