AI 助理
备案控制台
开发者社区 云原生 文章 正文

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

2024-10-18 94
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章详细介绍了如何使用Vue和Element UI搭建一个后台管理系统，包括首页布局、侧边栏、样式调整、菜单和路由配置，以及解决开发中遇到的问题。

导言-大纲

一、首页架子的搭建

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

1. Home.vue

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

  2. 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. 无孩子菜单

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

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

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

  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">选项1</el-menu-item>
        <el-menu-item index="1-2">选项2</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>

  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>

在这里插入图片描述
在这里插入图片描述

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

1. 修改menu样式

  1. commenAsideMenu.vue 侧边栏样式

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

    在这里插入图片描述

  2. 背景颜色，鼠标移动上后高亮
    在这里插入图片描述
    在这里插入图片描述

2. 修改App.vue 样式

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

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

在这里插入图片描述

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>

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 + ’ ’ "
完美解决

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

文章标签：
容器
JavaScript
java冯坚持
目录
相关文章
艳艳耶
|
JSON 前端开发 Java
Mock.js之Element-ui搭建首页导航与左侧菜单
Mock.js之Element-ui搭建首页导航与左侧菜单
艳艳耶
82 0
无法自律的人
|
JSON 前端开发 JavaScript
【Element-UI】Mockjs及案例首页导航、左侧菜单
Mock.js是一个用于生成模拟数据的JavaScript库。它能够模拟后端API接口，用于前端开发时进行接口调试和测试提高自动化测试效率。使用Mock.js可以快速创建虚拟的数据，并且可以设置数据的类型、格式和规则，从而模拟真实的数据响应。Mock.js支持生成随机数据拦截Ajax请求以返回模拟数据支持RESTful API风格等功能，能够提高前端开发效率，并且减少对后端接口的依赖。支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
无法自律的人
159 0
朝阳39
|
5月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表（含Tdesign升级，切换调试基础库，设置全局样式，配置组件按需注入，添加图片素材，wx:for，生命周期 onLoad）
朝阳39
167 0
孤留光乩
|
JSON 前端开发 JavaScript
Element UI搭建首页导航和左侧菜单以及Mock.js和（组件通信）总线的运用
Element UI搭建首页导航和左侧菜单以及Mock.js和（组件通信）总线的运用
孤留光乩
107 0
我是夜阑的狗
|
7月前
|
小程序
【微信小程序】-- 全局配置 -- tabBar（十七）
【微信小程序】-- 全局配置 -- tabBar（十七）
我是夜阑的狗
914 0
【微信小程序】-- 全局配置 -- tabBar（十七）
邹邹很busy。
Vue--ElementUI实现主页面横向导航
Vue--ElementUI实现主页面横向导航
邹邹很busy。
304 0
我是夜阑的狗
|
7月前
|
小程序
【微信小程序】-- 全局配置 -- window - 导航栏（十五）
【微信小程序】-- 全局配置 -- window - 导航栏（十五）
我是夜阑的狗
115 0
web前端圈
|
7月前
|
前端开发
如何让url在新页面打开路由页面，并脱离vue-admin-template的壳，即不包裹在侧边栏和顶栏中
如何让url在新页面打开路由页面，并脱离vue-admin-template的壳，即不包裹在侧边栏和顶栏中
web前端圈
62 0
现在是571
|
7月前
|
JSON 前端开发 JavaScript
【Element-UI】Mock.js，案例首页导航、左侧菜单
【Element-UI】Mock.js，案例首页导航、左侧菜单
现在是571
87 0
懒大王o
|
JavaScript 前端开发 容器
【Vue.js】使用Element搭建首页导航&左侧菜单
【Vue.js】使用Element搭建首页导航&左侧菜单
懒大王o
76 0