side menu 初步完成

src/main.js

@@ -21,6 +21,8 @@ import {
   Form,
   FormItem,
   Icon,
+  Row,
+  Col,
 } from 'element-ui';
 */
 

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
-import Login from '../views/Login.vue'
+import Home from '../views/Home/Home.vue'
+import Login from '../views/Login/Login.vue'
 
 Vue.use(VueRouter)
 

src/views/Home.vue

@@ -1,102 +0,0 @@
-<template>
-    <div class="home">
-        <header class="header">
-            <div class="left">left</div>
-            <div class="right">
-                <el-button type="primary" @click="onSignIn">登录</el-button>
-                <el-button type="primary" @click="onSignIn">登录</el-button>
-            </div>
-        </header>
-        <section class="section">
-            <el-row class="tac">
-                <el-col :span="12">
-                    <h5>默认颜色</h5>
-                    <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" >
-                        <el-submenu index="1">
-                            <template slot="title">
-                                <i class="el-icon-location"></i>
-                                <span>导航一</span>
-                            </template>
-                            <el-menu-item-group>
-                                <template slot="title">分组一</template>
-                                <el-menu-item index="1-1">选项1</el-menu-item>
-                                <el-menu-item index="1-2">选项2</el-menu-item>
-                            </el-menu-item-group>
-                            <el-menu-item-group title="分组2">
-                                <el-menu-item index="1-3">选项3</el-menu-item>
-                            </el-menu-item-group>
-                            <el-submenu index="1-4">
-                                <template slot="title">选项4</template>
-                                <el-menu-item index="1-4-1">选项1</el-menu-item>
-                            </el-submenu>
-                        </el-submenu>
-                        
-                        <el-menu-item index="2">
-                            <i class="el-icon-menu"></i>
-                            <span slot="title">导航二</span>
-                        </el-menu-item>
-
-                        <el-menu-item index="3" disabled>
-                            <i class="el-icon-document"></i>
-                            <span slot="title">导航三</span>
-                        </el-menu-item>
-
-                        <el-menu-item index="4">
-                            <i class="el-icon-setting"></i>
-                            <span slot="title">导航四</span>
-                        </el-menu-item>
-                    </el-menu>
-                </el-col>
-            </el-row>
-        </section>
-    </div>
-</template>
-
-<script>
-// @ is an alias to /src
-// import HelloWorld from "@/components/HelloWorld.vue";
-
-export default {
-    name: "home",
-    components: {},
-    data() {
-        return {
-            // 菜单数据
-            menuData: [
-                {
-                    oneMenuName: "导航一", // 一级菜单名
-                    childList: [
-                        
-                    ],
-                    iconClassName: 'aaa',  // element-ui图标名
-                },
-                
-                "导航二",
-                "导航三",
-                "导航四",
-            ]
-        };
-    },
-    methods: {
-        onSignIn() {},
-        handleOpen(key, keyPath) {
-            console.log(key, keyPath);
-        },
-        handleClose(key, keyPath) {
-            console.log(key, keyPath);
-        }
-    }
-};
-</script>
-
-<style lang="scss" scoped>
-.home {
-    .header {
-        display: flex;
-        justify-content: space-between;
-        border: 1px solid #099;
-    }
-    height: 2000px;
-    // border: 2px solid #f00;
-}
-</style>

src/views/Home/Home.vue

@@ -0,0 +1,152 @@
+<template>
+    <div class="home">
+        <header class="header">
+            <div class="left">left</div>
+            <div class="right">
+                <el-button type="primary" @click="onSignIn">登录</el-button>
+                <el-button type="primary" @click="onSignIn">登录</el-button>
+            </div>
+        </header>
+        <section class="section">
+            <!-- <el-row class="tac">
+                <el-col :span="3">
+                    <h5>默认颜色</h5>
+                    <el-menu
+                        default-active="2"
+                        class="el-menu-vertical-demo"
+                        @open="handleOpen"
+                        @close="handleClose"
+                    >
+                        <el-submenu index="1">
+                            <template slot="title">
+                                <i class="el-icon-location"></i>
+                                <span>导航一</span>
+                            </template>
+                            <el-menu-item-group>
+                                <template slot="title">分组一</template>
+                                <el-menu-item index="1-1">选项1</el-menu-item>
+                                <el-menu-item index="1-2">选项2</el-menu-item>
+                            </el-menu-item-group>
+                            <el-menu-item-group title="分组2">
+                                <el-menu-item index="1-3">选项3</el-menu-item>
+                            </el-menu-item-group>
+                            <el-submenu index="1-4">
+                                <template slot="title">选项4</template>
+                                <el-menu-item index="1-4-1">选项1</el-menu-item>
+                            </el-submenu>
+                        </el-submenu>
+
+                        <el-submenu index="2">
+                            <template slot="title">
+                                <i class="el-icon-menu"></i>
+                                <span slot="title">导航二</span>
+                            </template>
+                            <el-menu-item index="2-1">选项1</el-menu-item>
+                            <el-menu-item index="2-2">选项2</el-menu-item>
+                            <el-menu-item index="2-3">选项3</el-menu-item>
+                            <el-menu-item index="2-4">选项4</el-menu-item>
+                        </el-submenu>
+
+                        <el-menu-item index="3" :disabled='false'>
+                            <i class="el-icon-document"></i>
+                            <span slot="title">导航三</span>
+                        </el-menu-item>
+
+                        <el-menu-item index="4">
+                            <i class="el-icon-setting"></i>
+                            <span slot="title">导航四</span>
+                        </el-menu-item>
+                    </el-menu>
+                </el-col>
+            </el-row>-->
+
+            <el-row class="tac">
+                <el-col :span="3">
+                    <h5>默认颜色</h5>
+                    <el-menu
+                        default-active="2"
+                        class="el-menu-vertical-demo"
+                        @open="handleOpen"
+                        @close="handleClose"
+                    >
+                        <div v-for="(item) in menuData " :key="item.index">
+                            <el-submenu v-if="item.childList && item.childList.length > 0" :index="item.index">
+                                <template slot="title">
+                                    <i :class="item.iconClassName"></i>
+                                    <span slot="title">{{ item.oneMenuName }}</span>
+                                </template>
+                                <el-menu-item v-for="(item1) in item.childList" :key="item1.index" :index="item1.index">{{ item1.optionName }}</el-menu-item>
+                            </el-submenu>
+                            <el-menu-item v-else :index="item.index" :disabled="item.disabled">
+                                <i :class="item.iconClassName"></i>
+                                <span slot="title">{{ item.oneMenuName }}</span>
+                            </el-menu-item>
+                        </div>
+
+                        <!-- <el-submenu index="2">
+                            <template slot="title">
+                                <i class="el-icon-menu"></i>
+                                <span slot="title">导航二</span>
+                            </template>
+                            <el-menu-item index="2-1">选项1</el-menu-item>
+                            <el-menu-item index="2-2">选项2</el-menu-item>
+                            <el-menu-item index="2-3">选项3</el-menu-item>
+                            <el-menu-item index="2-4">选项4</el-menu-item>
+                        </el-submenu>
+
+                        <el-menu-item index="3" :disabled="false">
+                            <i class="el-icon-document"></i>
+                            <span slot="title">导航三</span>
+                        </el-menu-item>
+
+                        <el-menu-item index="4">
+                            <i class="el-icon-setting"></i>
+                            <span slot="title">导航四</span>
+                        </el-menu-item> -->
+                    </el-menu>
+                </el-col>
+            </el-row>
+        </section>
+    </div>
+</template>
+
+<script>
+// import HelloWorld from "@/components/HelloWorld.vue";
+import { menuData } from "./mencCofig.js";
+
+export default {
+    name: "home",
+    components: {},
+    data() {
+        return {
+            // 菜单配置
+            menuData
+        };
+    },
+    created() {
+        console.log(this.menuData);
+    },
+    mounted() {},
+    methods: {
+        onSignIn() {},
+        handleOpen(key, keyPath) {
+            console.log(key, keyPath);
+        },
+        handleClose(key, keyPath) {
+            console.log(key, keyPath);
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.home {
+    .header {
+        display: flex;
+        justify-content: space-between;
+        border: 1px solid #099;
+    }
+    height: 2000px;
+    // border: 2px solid #f00;
+}
+</style>

src/views/Home/mencCofig.js

@@ -0,0 +1,106 @@
+/* 菜单配置 描述 */
+const menuData描述 = [
+    // 有子菜单 并且字菜单分组的
+    {
+        oneMenuName: "导航一", // 一级菜单名
+        iconClassName: "aaa", // element-ui图标名
+        index: '1', // 唯一标志
+        childList: [ // 分组的
+            {
+                groupName: '组名一',
+                index: '1-1-1',
+                list: [
+                    {
+                        optionName: '选项1',
+                        routerName: "home"
+                    },
+                    {}
+                ],
+            },
+            {
+                groupName: '组名二',
+                index: '1-1-2',
+                list: [
+                    {
+                        optionName: '选项1',
+                        routerName: "home"
+                    },
+                    {}
+                ],
+            }
+        ],
+    },
+    // 有子菜单 字菜单不分组的
+    {
+        oneMenuName: "导航二",
+        iconClassName: "el-icon-menu",
+        index: '2',
+        disabled: false, // 是否禁用
+        childList: [ // 不分组的
+            {
+                optionName: '选项1',
+                index: '2-1',
+                routerName: "home"
+            },
+            {}
+        ]
+    },
+    // 无子菜单的
+    {
+        oneMenuName: "导航三",
+        iconClassName: "el-icon-document",
+        routerName: "home",
+        index: '3',
+        disabled: false
+    },
+    
+    "导航四"
+]
+
+
+
+export const menuData = [
+    // 有子菜单 字菜单不分组的
+    {
+        oneMenuName: "导航一",
+        iconClassName: "el-icon-menu",
+        index: '1',
+        disabled: false, // 是否禁用
+        childList: [ // 不分组的
+            {
+                optionName: '选项1',
+                index: '1-1',
+                routerName: "home"
+            },
+            {
+                optionName: '选项2',
+                index: '1-2',
+                routerName: "home"
+            },
+            {
+                optionName: '选项3',
+                index: '1-3',
+                routerName: "home"
+            },
+            
+        ]
+    },
+    // 无子菜单的
+    {
+        oneMenuName: "导航二",
+        iconClassName: "el-icon-document",
+        routerName: "home",
+        index: '2',
+        disabled: false
+    },
+    // 无子菜单的
+    {
+        oneMenuName: "导航三",
+        iconClassName: "el-icon-document",
+        routerName: "home",
+        index: '3',
+        disabled: false,
+    }
+]
+
+// export default {menuData}

src/views/Login.vue

@@ -2,7 +2,7 @@
     <div class="login">
         <div class="shade">
             <header class="header">
-                <img class="logo" src="../assets/logo.png" alt="慧牧科技LOGO" />
+                <img class="logo" src="../../assets/logo.png" alt="慧牧科技LOGO" />
                 慧牧科技
             </header>
             <article class="article">
@@ -52,7 +52,7 @@ export default {
 .login {
     width: 100%;
     height: 100%;
-    background: url(../assets/login_bg.jpg) 0 0 no-repeat;
+    background: url(../../assets/login_bg.jpg) 0 0 no-repeat;
     background-size: 100%;
     .shade {
         height: 100%;