已完成顶部导航

package.json

@@ -9,7 +9,12 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "element-ui": "^2.15.13",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.3",
+    "vue": "^2.6.14",
+    "vue-router": "3",
+    "vuex": "3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",

src/App.vue

@@ -1,28 +1,22 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <layout/>
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import layout from "@/components/layout.vue";
 export default {
   name: 'App',
   components: {
-    HelloWorld
+    layout
   }
 }
 </script>
 
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang="less">
+  html,body,h3{
+    margin: 0;
+    padding: 0;
+  }
 </style>

src/components/HelloWorld.vue

@@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/components/layout.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <el-container>
+      <el-aside width="200px">
+        <left_navigation/>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <top_navigation/>
+        </el-header>
+        <el-main>
+          <router-view></router-view>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import left_navigation from "@/components/left_navigation.vue";
+import top_navigation from "@/components/top_navigation.vue";
+export default {
+  name: "layout_list",
+  data(){
+    return{
+
+    }
+  },
+  components:{
+    left_navigation,
+    top_navigation
+  }
+}
+</script>
+
+<style scoped>
+  .left_navigation{
+    width: 200px;
+    height: 500px;
+    background-color: cornflowerblue;
+  }
+  .el-header{
+    padding: 0;
+  }
+</style>

src/components/left_navigation.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <el-row class="tac">
+      <el-col :span="24">
+        <el-menu
+            default-active="2"
+            class="el-menu-vertical-demo"
+            @open="handleOpen"
+            @close="handleClose"
+            background-color="#545c64"
+            text-color="#fff"
+            active-text-color="#ffd04b"
+            style="height: 100vh">
+          <h3>通用后台管理</h3>
+          <el-menu-item :index="item.label" v-for="item in noChild" :key="item.label" @click="menuRouter(item.path)">
+            <i :class="item.icon"></i>
+            <span slot="title">{{item.label}}</span>
+          </el-menu-item>
+          <el-submenu :index="item.label" v-for="item in hasChild" :key="item.label">
+            <template slot="title">
+              <i :class="item.icon"></i>
+              <span>{{item.label}}</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item :index="item2.label" v-for="item2 in item.child" :key="item2.label">
+                {{item2.label}}
+              </el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-menu>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "left_navigation",
+  data(){
+    return{
+      navigator:[
+        {
+          label:'首页',
+          icon:'el-icon-s-home',
+          path:'/index'
+        },
+        {
+          label:'用户管理',
+          icon:'el-icon-user-solid',
+          path:'/user'
+        },
+        {
+          label: '商品管理',
+          icon: 'el-icon-s-goods',
+          path: '/commodity'
+        },
+        {
+          label: '其他',
+          icon: 'el-icon-s-grid',
+          child:[
+            {
+              label:'选项一',
+              path:'/one',
+            },
+            {
+              label: '选项二',
+              path: '/two'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  methods: {
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    menuRouter(path){
+      let that = this
+      //只有当点击的导航路径与当前路径不相同时才可以跳转('/'重定向后相当于'/index')
+      if(that.$route.path !== path && !(that.$route.path === '/' && path === '/index')){
+        console.log('执行了')
+        this.$router.push(path)
+      }
+    }
+  },
+  computed:{
+    hasChild(){
+      return this.navigator.filter(item => item.child)
+    },
+    noChild(){
+      return this.navigator.filter(item => !item.child)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.el-menu{
+  h3{
+    color: #ffffff;
+    text-align: center;
+    line-height: 48px;
+    font-weight: 400;
+    font-size: 16px;
+  }
+}
+</style>

src/components/top_navigation.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div class="top">
+      <div class="topButton">
+        <el-button icon="el-icon-menu" size="mini"></el-button>
+        <span>首页</span>
+      </div>
+      <div class="topIcon">
+        <el-dropdown :hide-on-click="false">
+          <span class="el-dropdown-link">
+            <img src="../assets/logo.png" class="userImg">
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item>个人中心</el-dropdown-item>
+            <el-dropdown-item>退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "top_navigation"
+}
+</script>
+
+<style scoped lang="less">
+.top {
+  height: 60px;
+  background-color: #545c64;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .topButton {
+    width: 100px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-left: 40px;
+    color: white;
+  }
+
+  .topIcon {
+    margin-right: 40px;
+  }
+}
+
+.userImg{
+  width: 40px;
+  height: 40px;
+}
+</style>

src/main.js

@@ -1,8 +1,14 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+
+Vue.use(ElementUI);
 
 Vue.config.productionTip = false
 
 new Vue({
+  router,
   render: h => h(App),
 }).$mount('#app')

src/pages/commodity/commodity.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    商品
+  </div>
+</template>
+
+<script>
+export default {
+  name: "myCommodity"
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/index/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>首页</div>
+</template>
+
+<script>
+export default {
+  name: "myIndex"
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/other/other1.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    其他1
+  </div>
+</template>
+
+<script>
+export default {
+  name: "myOther1"
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/other/other2.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    其他2
+  </div>
+</template>
+
+<script>
+export default {
+  name: "myOther2"
+}
+</script>
+
+<style scoped>
+
+</style>

src/pages/user/user.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    用户管理
+  </div>
+</template>
+
+<script>
+export default {
+  name: "myUser"
+}
+</script>
+
+<style scoped>
+
+</style>

src/router/index.js

@@ -0,0 +1,36 @@
+import Vue from "vue";
+import Router from 'vue-router'
+Vue.use(Router)
+import index from "@/pages/index/index.vue";
+import user from "@/pages/user/user.vue";
+import commodity from "@/pages/commodity/commodity.vue";
+import other1 from "@/pages/other/other1.vue";
+
+export default new Router({
+    routes:[
+        {
+            path:'/index',
+            name:'index',
+            component:index
+        },
+        {
+            path:'/commodity',
+            name:'commodity',
+            component: commodity
+        },
+        {
+            path:'/user',
+            name:'user',
+            component: user
+        },
+        {
+            path:'/other1',
+            name:'other1',
+            component: other1
+        },
+        {
+            path:'/',
+            redirect:'/index'
+        }
+    ]
+})