1、前言

记录从零基础学习编写 element-ui项目的笔记，以防遗忘时可回溯温习。此文乃是笔者在开展从无到有编写 element-ui 项目的学习进程中所留存的笔记，同时涵盖了记录期间遭遇的部分问题及其解决之法，亦包含了些许个人的思考与见解。

2、前端页面布局

前端页面详情

本项目实现左右布局。左侧为菜单栏，左侧上方为logo+平台title；右侧上方栏为header栏，header栏左侧实现按钮折叠，右侧为用户信息；

整体项目结构如下：

前端页面布局实现

A、Layout页面实现

通过两个div实现左右布局。

<template>
 <div class="layout">
<!-- layout 布局 左右两侧 -->
<div class = "menu">
<Menu :isCollapse="isCollapse"></Menu>
</div>
<div class = "content" :class="{small:isCollapse}">
<Content @changeShow ="changeShow" :isCollapse="isCollapse"></Content>
</div>
</div>
</template>
<script>
</script>
<style>
.layout{
    display: flex;
    width: 100%;
    height: 100%;
    .menu{
        background: rgb(17, 47, 80);
    }
    .content{
        top: 0px;
        width: 100%;
    }
    /* .small{
        width: 100%;
    } */
}

</style>

实现效果如下：

B.Content页面实现

采用上下结构，上方为Header栏，下方为路由显现菜单详细页面。header栏左侧通过两个图标是否显示，并通过关联方法实现菜单折叠；header栏右侧通过user图标+swtich-button按钮实现。路由显示详情通过router-view实现。

<template>
    <div>
        <div class="header">
            <div class="open-menu">
                <i v-if="!isCollapse" class="el-icon-s-fold" @click="changeMenu"></i>
                <i v-else class="el-icon-s-unfold" @click="changeMenu"></i>
            </div>
            <div class="header-right">
                <span class="el-icon-user">欢迎 管理员</span> ｜
                <span class="el-icon-switch-button"></span>
            </div>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>

export default {
    props: ['isCollapse'],
    data() {
        return {
        }
    },
    methods: {
        changeMenu() {
            this.$emit('changeShow')
        },
    }

}
</script>
<style>
.header {
    height: 50px;
    background: rgb(114, 159, 241);
    color: white;
    line-height: 50px;
    display: flex;

    .open-menu {
        flex: 1;
        .el-icon-s-fold {
            font-size: 22px;
            cursor: pointer;
        }

        .el-icon-s-unfold {
            font-size: 22px;
            cursor: pointer;
        }
    }

    .header-right {
        align-items: center;
        text-align: end;
        display: flex;
        width: 150px;
    }
}
</style>

C、Menu页面实现

通过el-menu实现菜单，第一个菜单项为logo+title，第二个菜单项为首页。

<template>
    <div>
        <el-menu default-active="/" class="el-menu-vertical-demo" background-color="#112f50" text-color="#fff" active-text-color="#ffd04b" router :collapse="isCollapse">
            <el-menu-item>
                <img class="logo" src="../../assets/logo.png" alt="">
                <span slot="title">工具平台</span>
            </el-menu-item>
            <el-menu-item index="/">
                <i class="el-icon-menu"></i>
                <span slot="title">首页</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script>
export default {
    props: ['isCollapse'],
    data: {

    }

}

</script>

<style >
.logo {
    width: 20px;
}

.el-menu {
    border-right: 0;

    .is-active {
        background: rgb(64, 121, 226) !important;
        color: #ffff !important;
    }

}

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

项目代码：Juzi520/juzi-vue-template

element-ui操作手册：Element - The world's most popular Vue UI framework