导言-大纲

一、首页架子的搭建

1. element 中 整体页面的架构：container的容器

1. Home.vue

2. 选择倒数第二个，复制到项目的 Home页面，需要编写less样式，所以要安装less 和 less-loader 这两个包：
   npm i less 和 npm i less-loader@5.0.0
3. Home.vue 添加了

   <template>
     <el-container style="height: 100%">
       <el-aside width="auto">
         <commen-aside-menu>commen-aside-menu>
       el-aside>
       <el-container>
         <el-header>Headerel-header>
         <el-main>Mainel-main>
       el-container>
     el-container>
   template>
   
   <script>
   export default {
     name: 'Home',
     data(){
       return {}
     }
   }
   script>
   <style lang="less" scoped>
   .el-header {
       background-color: #333;
   }
   .el-main {
       padding-top: 0;
   }
   style>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28

2. main.js 中进行按需引入

import Vue from 'vue'
import {Button, Container, Header, Main, Aside} from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'

import router from './router'

Vue.config.productionTip = false

//Vue.component(Button)
Vue.use(Button)
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Aside)

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3. 修改App.vue

<template>
  <div id="app">
    <router-view>router-view>
  div>
template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App'
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

4. 页面

二、侧边栏的实现

跟着官网走：menu的样式

1. 新建 component/commenAsideMenu.vue

把element中的侧边栏copy过来。

<template>
    <el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-submenu index="1">
        <template slot="title">
        <i class="el-icon-location">i>
        <span slot="title">导航一span>
        template>
        <el-menu-item-group>
        <span slot="title">分组一span>
        <el-menu-item index="1-1">选项1el-menu-item>
        <el-menu-item index="1-2">选项2el-menu-item>
        el-menu-item-group>
        <el-menu-item-group title="分组2">
        <el-menu-item index="1-3">选项3el-menu-item>
        el-menu-item-group>
        <el-submenu index="1-4">
        <span slot="title">选项4span>
        <el-menu-item index="1-4-1">选项1el-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>
template>


<style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
style>

<script>
  export default {
    data() {
      return {
        isCollapse: true
      };
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

2. Home.vue

3. main.js

4. 页面

三、解决默认样式

1. 解决最上面空白的区域

原因：app.vue中有默认样式

<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>
1
2
3
4
5
6
7
8
9
10

删掉，改成：

<style>
#app {
  height: 100vh;
}
style>

1
2
3
4
5
6

结果：

2. 展开侧边栏

修改为false

结果：

3. 改造侧边栏

a. 无孩子菜单

1. 把数据放到data中，这应该是从数据中获取的

   [
           {
             path: '/',
             name: 'home',
             label: '首页',
             icon: 's-home',
             url: 'Home/Home'
           },
           {
             path: '/mall',
             name: 'mall',
             label: '商品管理',
             icon: 'video-play',
             url: 'MallManage/MallManage'
           },
           {
             path: '/user',
             name: 'user',
             label: '用户管理',
             icon: 'user',
             url: 'UserManage/UserManage'
           },
           {
             label: '其他',
             icon: 'location',
             children: [
               {
                 path: '/page1',
                 name: 'page1',
                 label: '页面1',
                 icon: 'setting',
                 url: 'Other/PageOne'
               },
               {
                 path: '/page2',
                 name: 'page2',
                 label: '页面2',
                 icon: 'setting',
                 url: 'Other/PageTwo'
               }
             ]
           }
         ]
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40
   41
   42
   43

2. 编写计算函数，将数据分为 带有孩子的和不带孩子的

     computed: {
       noChildren() {
         return this.menu.filter(item => !item.children)
       },
       hasChildren(){
         return this.menu.filter(item => item.children)
       }
   1
   2
   3
   4
   5
   6
   7

3. 改造侧边栏代码，进行for 循环便利。

   <template>
     <el-menu
       default-active="1-4-1"
       class="el-menu-vertical-demo"
       @open="handleOpen"
       @close="handleClose"
       :collapse="isCollapse"
     >
       <el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path">
         <i :class="'el-icon-' + item.icon">i>
         <span slot="title">{{item.label}}span>
       el-menu-item>
       <el-submenu index="1">
         <template slot="title">
           <i class="el-icon-location">i>
           <span slot="title">导航一span>
         template>
         <el-menu-item-group>
           <el-menu-item index="1-1">选项1el-menu-item>
           <el-menu-item index="1-2">选项2el-menu-item>
         el-menu-item-group>
       el-submenu>
     el-menu>
   template>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24

4. 页面展示
   

b、无孩子菜单

直接上代码就行了

<template>
  <el-menu
    default-active="1-4-1"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    :collapse="isCollapse"
  >
    <h3>通用后台管理系统h3>
    <el-menu-item v-for="item in noChildren" :index="item.path" :key="item.path">
      <i :class="'el-icon-' + item.icon">i>
      <span slot="title">{{item.label}}span>
    el-menu-item>
    <el-submenu v-for="item in hasChildren" :index="item.path" :key="item.path">
      <template slot="title">
        <i :class="'el-icon-' + item.icon">i>
        <span slot="title">{{item.label}}span>
      template>
      <el-menu-item-group v-for="(subItem, subIndex) in item.children" :key="subItem.path">
        <el-menu-item :index="subIndex">{{subItem.label}}el-menu-item>
      el-menu-item-group>
    el-submenu>
  el-menu>
template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

四、menu/App.vue样式和路由跳转

1. 修改menu样式

1. commenAsideMenu.vue 侧边栏样式

   .el-menu {
     height: 100%;
     border: none;
     h3 {
       color: #fff;
       text-align: center;
       line-height: 48px;
     }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9

   
2. 背景颜色，鼠标移动上后高亮
   
   

2. 修改App.vue 样式

在App.vue中解决左边和上边的白边以及侧边栏的高度问题。

解决样式

html, body {
  margin: 0px;  
  padding: 0px;
  height: 100%; // 解决高度问题
}
1
2
3
4
5

3. 路由

a、 添加事件

b、更改Home为Main.vue

因为这里的Home，已经不是Home的意义了，而是主页的意义，所以改为Main。

1. 修改名称
2. 修改路由中的名称
   

c、移动views/user/index.vue

<template>
  <div>
    我是 User 页面
  div>
template>

<script>
export default {
  name: 'User',
  data(){
    return {}
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

d、新建views/home/index.vue

<template>
  <div>
    我是 Home 页面
  div>
template>

<script>
export default {
  name: 'Home',
  data(){
    return {}
  }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

e、修改router/index.js

const routes = [
    {
        path: '/',
        name: 'Main',
        component: () => import('../views/Main.vue'),   // 第二种方式
        children: [
            {
                path: '/home',
                name: 'home',
                component: () => import('../views/home')
            },
            {
                path: '/user',
                name: 'user',
                component: User
            }
        ]
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

f、更改Main.vue

g、页面

五、开发中的bug和警告

1. prop “index”. 警告

vue.runtime.esm.js?c320:4560 [Vue warn]: Invalid prop: custom validator check failed for prop "index".
1

在使用elementUI循环渲染导航的过程中

会出现如下警告

报错翻译：无效属性：属性“index”的类型检查失败。应为值为“undefined”的字符串，但未定义
解决方法：

将:index=“item.path”
改为:index="item.path + ’ ’ "
完美解决

原因：elementUI的index是字符串格式，加一个‘ ’，将后台数据转换为字符串，那个item确实没有path这个属性，所以返回undefined。最好给那个item加个path属性，或者干脆换个属性，比如name，所有item都有这个属性就可以了。