第3章 管理端(Vue)布局面的设计实现

1 导入“element-plus：Icon”组件

1.1“element-plus：Icon” 组件导入命令：

    npm install @element-plus/icons-vue

1.2“element-plus：Icon” 组件配置：

import { createApp } from 'vue'//在vue-cli4（4.5.0版本的脚手架）后取代了：import Vue from 'vue';

//把“element-plus”模板插件【导入】为全局变量：“ElementPlus”。

import ElementPlus from 'element-plus'

import zhCn from 'element-plus/es/locale/lang/zh-cn';//ElementPlus 组件内部默认使用英语，使用中文语言。

import 'element-plus/dist/index.css'

//把“element-plus icon”的所有图标【导入】为全局变量：“ElementPlusIconsVue”。

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import App from './App.vue'

import router from './router'

import store from './store'

const app = createApp(App)

// 使全局变量：“ElementPlus”，在所有的*.vue页面中都有效。

app.use(ElementPlus, {

    locale: zhCn,//使用中文语言

})

//把“element-plus icon”的所有图标，依次实例化到当前项目中，从而使这些图标在所有的*.vue页面中都有效。

for (const [key, component] of Object.entries(ElementPlusIconsVue)) {

  app.component(key, component)

}

app

    .use(store)

    .use(router)

    .mount('#app')

2 定义路由：src\router\index.js

import {

    createRouter,

    createWebHashHistory

} from 'vue-router'

import HomeView from '../views/HomeView.vue'

const routes = [{

        path: '/',

        name: '欢迎',

        component: () => import('../views/WelcomeView.vue'),

        meta: {

            title: '欢迎',

            icon: "HomeFilled",

            menuId: '1',

        },

    },

    {

        path: '/Template',

        name: '复制模板',

        component: () => import('../views/TemplateView.vue'),

        meta: {

            title: '复制模板',

            icon: "Document",

            menuId: '2',

        },

    },

    {

        path: '/Test',

        name: '测试',

        component: () => import('../views/TestView'),

        meta: {

            title: '测试',

            icon: "Setting",

            menuId: '3',

        },

    },

    {

        path: '/Users/User',

        name: '用户管理',

        component: () => import('../views/Users/UserView.vue'),

        meta: {

            title: '用户管理',

            icon: "User",

            menuId: '4',

        },

        children: [{

                path: '/Users/User',

                name: '用户',

                component: () => import('../views/Users/UserView.vue'),

                meta: {

                    title: '',

                    menuId: '4-1',

                },

            },

            {

                path: '/Users/Role',

                name: '角色',

                component: () => import('../views/Users/RoleView.vue'),

                meta: {

                    title: '角色',

                    menuId: '4-2',

                },

            },

        ]

    },

    {

        path: '/home',

        name: 'home',

        component: HomeView,

        meta: {

            title: '首页',

            icon: "Tools",

            menuId: '5',

        },

    },

    {

        path: '/about',

        name: 'about',

        component: () => import('../views/AboutView.vue'),

        meta: {

            title: '关于',

            icon: "Tools",

            menuId: '6',

        },

    },

]

const router = createRouter({

    history: createWebHashHistory(),

    routes

})

// 如果路由实例中有标题实例，依次把标题渲染显示在浏览器相对应的标签上。

//to: 当前跳转到页面的路由实例。

router.beforeEach(async (to) => {

    if (to.meta.title) {

        document.title = to.meta.title;

    }

});

export default router

3 定义布局页：src\views\ WelcomeView.vue

<template>

    <!-- 直接调用：element-plus：Icon-->

    <!-- <div id="app">

        <el-icon>

            <element-plus></element-plus>

        </el-icon>

        <el-icon>

            <el-icon>

                <Operation />

            </el-icon>

        </el-icon>

    </div> -->

   

    <el-container>

        <!-- 侧边栏 ，"<div class="aside">标签可被删除，为了下拉条控件样式保存了该标签"-->

        <div class="aside">

            <el-aside width="200px">

                <!--必须包含有："el-menu"标签，否则左侧菜单栏的高度不能达到100% -->

                <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"

                    default-active="4-1" text-color="#fff" router>

                    <template v-for="(item, index) in this.$router.options.routes" :key="index">

                        <el-sub-menu :index="item.meta.menuId" v-if="item.children && item.children.length">

                            <template #title>

                                <span>{{item.name}}</span>

                            </template>

                            <el-menu-item :index="children.meta.menuId" v-for="(children, index) in item.children"

                                :key="index" :route="{path:item.path}">

                                {{children.name}}

                            </el-menu-item>

                        </el-sub-menu>

                        <el-menu-item :index="item.meta.menuId" v-else :route="{path:item.path}">

                            <el-icon>

                                <component :is="item.meta.icon"></component>

                            </el-icon>

                            <span>{{item.name}}</span>

                        </el-menu-item>

                    </template>

                </el-menu>

            </el-aside>

        </div>

        <el-container>

            <el-header>Header</el-header>

            <el-main>

                Main

            </el-main>

            <el-footer>Footer</el-footer>

        </el-container>

    </el-container>

</template>

<script>

    import router from '../router/index.js'

    export default {

        name: 'WelcomeView',

        data() {

            return {

                menuList: {},

            };

        },

        methods: {

            getAllMenu() {

                //console.log(router);

                //console.log(this.$router.options.routes);

                //console.log(router.options.routes);

                console.log(router.options.routes);

                console.log(router.options.routes[0].meta.icon);

                console.log(router.options.routes[3].children[0].meta.menuId);

                //this.menuList=router.options.routes;

                //console.log(this.menuList);

                //console.log(this.menuList.Array);

            },

        },

        mounted() {

            this.getAllMenu();

            //console.log(router.value);

        },

    }

</script>

<style scoped lang="scss">

    .aside {

        width: 200px;

        overflow: hidden;

        background-color: #545c64;

    }

    .el-aside {

        height: 100%;

        //overflow-x: hidden;

        //overflow-y: scroll;

    }

    .el-header {

        background-color: #ff0000;

        color: #FFFFFF;

    }

    .el-main {

        height: 90vh; //必须定义："height"为：90vh，否则主区域的高度不能达到100%；如果大于90vh整页的调度将超过100%。

        background-color: #00ff00;

        color: #FFFFFF;

    }

    .el-footer {

        background-color: #0000ff;

        color: #FFFFFF;

    }

    //必须定义：".el-menu"样式，否则左侧菜单栏的高度不能达到100%

    .el-menu {

        height: 90vh; //必须定义："height"为：90vh，否则左侧菜单栏的高度不能达到100%；如果大于90vh整页的调度将超过100%。

    }

</style>

对以上功能更为具体实现和注释见：221220_001shopvue(布局设计完成)。