Element和后台搭建

1、element 安装

1.npm 安装

npm i element-ui -S

2. CDN

<!-- 引入样式 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2、后台管理系统首页搭建

<!-- 1、新建 /src/views/Index/Index.vue 文件 -->
<template>
    <el-container class="layout" style="height: 100%">
        <aside style="height: 100%">
            <el-menu default-active="-1" class="el-menu-vertical-demo" :collapse="isCollapse" active-text-color="#ffd04b" background-color="#545c64" text-color="#fff">
                <div class="logo">
                    <router-link to="/" class="router">
                        <img src="" alt="logo" />
                        <h1>phpAdmin</h1>
                    </router-link>
                </div>
                <router-link to="/"> 
                <el-menu-item index="-1">
                    <template #title>首页</template>
                </el-menu-item>
                 </router-link>
                 <el-sub-menu index="3">
                    <template #title>
                      <span>后台管理系统</span>
                    </template>
                    <router-link to="/admin/user"> 
                    <el-menu-item index="3-1">
                         <span>管理员管理</span> 
                    </el-menu-item>
                   </router-link>
                   <router-link to="/admin/">
                    <el-menu-item index="3-2">
                        <span>系统管理</span>
                    </el-menu-item>
                    </router-link>
                 </el-sub-menu>
                <el-sub-menu index="2">
                    <template #title>
                      <span>课袋鼠项目</span>
                    </template>
                    <router-link to="/ad"> 
                    <el-menu-item index="2-1">
                         <span>广告管理</span> 
                    </el-menu-item>
                   </router-link>
                   <router-link to="/course">
                    <el-menu-item index="2-2">
                        <span>课程管理</span>
                    </el-menu-item>
                    </router-link>
                    <el-menu-item index="2-3">
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="2-4">
                        <span>订单管理</span>
                    </el-menu-item>
                    <el-menu-item index="2-5">
                        <span>优惠券管理</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
            <div class="flexible" @click="isCollapse = !isCollapse">
                <el-icon v-if="isCollapse" color="white" :size="40"><ArrowRight /></el-icon>
                <el-icon v-else color="white" :size="40"><ArrowLeft /></el-icon>
            </div>
        </aside>
        <el-container>
            <el-header style="text-align: right; font-size: 20px">
                <div class="toolbar">
                    <el-dropdown size="large" type="primary">
                        <span>{{name}}<el-icon style="margin-left: 8px; margin-top: 1px"><ArrowDown /></el-icon></span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item>退出</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </el-header>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script>
import { reactive, toRefs } from "vue"
export default {
    name: "App",
    setup() {
        // 获取左侧菜单和用户信息
        const state = reactive({
            isCollapse: false,
            name : "欧阳克"
        });
        return {
            ...toRefs(state),
        };
    }
};
</script>
<style>
a {
    text-decoration: none;
}
.layout {
    background-color: #f0f2f5;
}
.layout .el-header {
    position: relative;
    background-color: white;
    color: var(--el-text-color-primary);
}
.layout aside {
    color: var(--el-text-color-primary);
    background: #001529;
}
.layout .el-menu {
    border-right: none;
}
.layout .el-main {
    margin: 30px 10px;
    background-color: white;
}
.layout .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
}
aside {
    position: relative;
}
.flexible {
    background-color: #002140;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
.layout aside .logo .router {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    animation-duration: 0.1s;
    overflow: hidden;
    text-decoration: none;
    padding-left: 1px;
    position: relative;
    left: 2px;
}
.layout aside .logo .router h1 {
    margin-left: 10px;
    color: aliceblue;
    overflow: hidden;
}
.layout aside .logo .router img {
    padding-left: 5px;
    width: 48px;
    height: 48px;
}
</style>