Vue2哔哩哔哩Allen老师通用后台管理系统

iaz999

已于 2023-09-04 17:53:00 修改

阅读量1.6k

点赞数 8

分类专栏：实战文章标签：前端

于 2023-04-08 09:14:03 首次发布

本文链接：https://blog.csdn.net/iaz999/article/details/130024035

版权

一、项目效果

二、项目版本，技术栈

node.js 16.16.0

vue-cli 5.0.8

vue-router 3.6.5

三、配置vue-router3

下载vue-router，地址安装 | Vue Router

yarn add vue-router@3.6.5

在src的router目录下创建index.js,引入vue-router

四、下载预处理器stylus，stylus-loader

yarn stylus stylus-loader@5.0.0

关闭eslint

五、设置嵌套路由

六、element-ui按需引入

npm i element-ui -S

npm install babel-plugin-component -D

注意message消息提示，调用方法和其他组件不同

七、首页布局，main组件引入container

element-ui网址 Element - The world's most popular Vue UI framework

选择倒数第二个布局

八、侧边栏commonAside菜单

侧边栏是公共组件，放在components中

调整成我们想要的效果

<template>
    <div>
         <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
                <h3>通用后台管理系统</h3>
                <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
                </el-menu-item>
                <el-menu-item index="3">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
                </el-menu-item>
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>导航一</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>
    </div>
</template>

<script>
    export default {
         methods: {
              handleOpen(key, keyPath) {
                console.log(key, keyPath);
              },
              handleClose(key, keyPath) {
                console.log(key, keyPath);
              }
            }
    }
</script>

<style lang="stylus" scoped>
.el-menu
    height: 100vh
    border-right: none
    color #fff
    h3
        color: #fff
        text-align: center
        line-height: 48px
        font-size: 16px
        font-weight: 400
</style>

去掉白边

创建menuData数组，判断有无子菜单，遍历侧边栏菜单

<template>
    <div>
         <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
                <h3>通用后台管理系统</h3>
                <el-menu-item
                    :index="item.name"
                    v-for="item in noChildren"
                    :key="item.name"
                >
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{
  {item.label}}</span>
                </el-menu-item>
                <el-submenu 
                    :index="item.label"
                    v-for="item in hasChildren"
                    :key="item.label"
                >
                    <template slot="title">
                        <i class="`el-icon-${item.icon}`"></i>
                        <span>{
  {item.label}}</span>
                    </template>
                    <el-menu-item-group
                        v-for="subItem in item.children"
                        :key="subItem.name"
                    >
                        <el-menu-item 
                            :index="subItem.name"
                        >{
  {subItem.label}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
    </div>
</template>

<script>
export default {
    data () {
        return {
            menuData: [
                {
                  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.menuData.filter(item => !item.children)
        },
        hasChildren () {
            return this.menuData.filter(item => item.children)
        },
    },
     methods: {
          handleOpen(key, keyPath) {
            console.log(key, keyPath);
          },
          handleClose(key, keyPath) {
            console.log(key, keyPath);
          }
        }
}
</script>

<style lang="stylus" scoped>
.el-menu
    height: 100vh
    border-right: none
    color #fff
    h3
        color: #fff
        text-align: center
        line-height: 48px
        font-size: 16px
        font-weight: 400
</style>

九、侧边栏路由实现

根据`menuData`里的path，在路由文件里配置路由

<template>
    <div>
         <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b">
                <h3>通用后台管理系统</h3>
                <el-menu-item
                    :index="item.name"
                    v-for="item in noChildren"
                    :key="item.name"
                    @click="clickMenu(item)"
                >
                <i :class="`el-icon-${item.icon}`"></i>
                <span slot="title">{
  {item.label}}</span>
                </el-menu-item>
                <el-submenu 
                    :index="item.label"
                    v-for="item in hasChildren"
                    :key="item.label"
                >
                    <template slot="title">
                        <i class="`el-icon-${item.icon}`"></i>
                        <span>{
  {item.label}}</span>
                    </template>
                    <el-menu-item-group
                        v-for="subItem in item.children"
                        :key="subItem.name"
                    >
                        <el-menu-item 
                            @click="clickMenu(subItem)" 
                            :index="subItem.name"
                        >{
  {subItem.label}}</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
    </div>
</template>

<script>
export default {
    data () {
        return {
            menuData: [
                {
                  path: '/',
                  name: 'home',
                  label: '首页',
                  icon: 's-home',