vue-element-admin 综合开发二：搭建首页架子、侧边栏、修改默认样式、menu和路由跳转页面初体验

冯insist

3784人浏览 · 2022-08-08 20:34:53

冯insist · 2022-08-08 20:34:53 发布

导言-大纲

一、首页架子的搭建

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

1. Home.vue

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

Home.vue 添加了<el-container style="height: 100%">

<template>
  <el-container style="height: 100%">
    <el-aside width="auto">
      <commen-aside-menu></commen-aside-menu>
    </el-aside>
    <el-container>
      <el-header>Header</el-header>
      <el-main>Main</el-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>

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')

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>

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">选项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">
        <span slot="title">选项4</span>
        <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>
</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>

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>

删掉，改成：

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

结果：
在这里插入图片描述

2. 展开侧边栏

修改为false
在这里插入图片描述
结果：

3. 改造侧边栏

a. 无孩子菜单

把数据放到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'
            }
          ]
        }
      ]

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

  computed: {
    noChildren() {
      return this.menu.filter(item => !item.children)
    },
    hasChildren(){
      return this.menu.filter(item => item.children)
    }

改造侧边栏代码，进行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">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

页面展示

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>

在这里插入图片描述

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

1. 修改menu样式

commenAsideMenu.vue 侧边栏样式

.el-menu {
  height: 100%;
  border: none;
  h3 {
    color: #fff;
    text-align: center;
    line-height: 48px;
  }
}

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

2. 修改App.vue 样式

在App.vue中解决左边和上边的白边以及侧边栏的高度问题。
在这里插入图片描述
解决样式

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

在这里插入图片描述

3. 路由

a、添加事件

在这里插入图片描述

b、更改Home为Main.vue

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

修改名称
修改路由中的名称

c、移动views/user/index.vue

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

<script>
export default {
  name: 'User',
  data(){
    return {}
  }
}
</script>

d、新建views/home/index.vue

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

<script>
export default {
  name: 'Home',
  data(){
    return {}
  }
}
</script>

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
            }
        ]
    }
]

在这里插入图片描述

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".

在使用elementUI循环渲染导航的过程中
在这里插入图片描述
会出现如下警告

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

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