Vue实训---3-element plus的使用与布局

1.引入ElementPlus

ElementPlus官网指南：快速开始 | Element Plus

在我们的项目main.js文件中，加入红框里的内容：

import { createApp } from 'vue'
import App from './App.vue'
// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"
// 引入路由
// import router from './router'
import router from '@/router/index.js'
// 引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'// 将之前的createApp(App).mount('#app') 拆开写，并在其中引入路由
// 创建vue实例
const app = createApp(App)
// 注入路由
app.use(router)
// 注入 element-plus
app.use(ElementPlus)
// 挂载到DOM上
app.mount('#app')

2.简单使用ElementPlus组件

ElementPlus官网对于每种组件都给出了代码示例。

例如：Button 按钮 | Element Plus中，

 将官网示例代码粘贴到我们的App.vue中，顺便对#app设置全局样式：

<script setup></script><template><router-view></router-view><div><el-button>Default</el-button><el-button type="primary" plain>Primary plain</el-button><el-button type="success">Success</el-button><el-button type="info">Info</el-button><el-button type="warning" round>Warning round</el-button><el-button type="danger" :icon="Delete" circle> 危险</el-button></div>
</template><style> 
/* scoped的作用是只在当前组件生效，我们这里设置的是全局样式，所以去掉scoped */、
/* 设置样式，让app组件占满整个屏幕，为什么是#app，因为我们在main.js中挂载的根组件就是#app，这样设置就是让根组件占满整个屏幕，不让页面显示滚动条*/
#app {width: 100%;height: 100%;overflow: hidden;
}
</style>

在vscode终端运行命令：

npm run dev

浏览器显示：

效果出现后，可以将这些el-button代码删掉，这样就不会影响我们后续的项目。

3.使用ElementPlus图标

3.1 引入图标

官网Icon 图标 | Element Plus中给出了图标的引入方式：

我们将这些代码加入到main.js中：

import { createApp } from 'vue'
import App from './App.vue'
// 引入全局样式，是对样式的初始化
import "@/assets/less/index.less"
// 引入路由
// import router from './router'
import router from '@/router/index.js'
// 引入 element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入 element-plus 的图标
import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 将之前的createApp(App).mount('#app') 拆开写，并在其中引入路由
// 创建vue实例
const app = createApp(App)
// 注入路由
app.use(router)
// 注入 element-plus
app.use(ElementPlus)
// 注入 element-plus 的图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}
// 挂载到DOM上
app.mount('#app')

3.2 ElementPlus页面布局

Container 布局容器 | Element Plus中给出了示例。

我们选择下图的示例：

我们期望将Main.vue文件做成下图的样子：

修改Main.vue文件，将官网代码复制过来，然后加上样式：

<template><div class="common-layout"><el-container><el-aside width="200px" class="el-aside">Aside</el-aside><el-container><el-header class="el-header">Header</el-header><el-main class="el-main">Main</el-main></el-container></el-container></div></template><script setup></script><style scoped lang="less">
.common-layout {height: 100%;background-color: aquamarine;
}
.el-header {background-color: #ede92f;
}
.el-aside {background-color: #88e5cc;height: 600px;
}
.el-main {background-color: #aec6de;
}
</style>

运行，浏览器显示：

成功！

继续在Main.js中修改成我们需要的样式：

<template><div class="common-layout"><el-container class="lay-container"><!-- <el-aside width="200px" class="el-aside">Aside</el-aside> 将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件--><common-aside></common-aside><el-container><el-header class="el-header"><!-- Header 将Header里的内容也替换成我们自己写的组件common-header--><common-header></common-header></el-header><el-main class="right-main">Main</el-main></el-container></el-container></div></template><script setup></script><style scoped lang="less">
.common-layout,.lay-container {height: 100%;
}
.el-header {background-color: #333;
}
</style>

运行，在浏览器查看源代码：

可以看出我们写的代码已经生效。

4.编写我们自己的左菜单栏

我们预期要实现的左菜单栏如下：

 Menu 菜单 | Element Plus中给出了类似的示例：

编写自定义左菜单栏common-aside对应的组件--新建src\components\CommonAside.vue，将上图中的代码（上面的代码中包含两个菜单栏，我们从第二个el-menu开始）复制过来。

<template><!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>，我们将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件 --><el-aside width="200px" class="el-aside"><el-menuactive-text-color="#ffd04b"background-color="#545c64"class="el-menu-vertical-demo"default-active="2"text-color="#fff"@open="handleOpen"@close="handleClose"><el-sub-menu index="1"><template #title><el-icon><location /></el-icon><span>Navigator One</span></template><el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group><el-menu-item-group title="Group Two"><el-menu-item index="1-3">item three</el-menu-item></el-menu-item-group><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><el-menu-item index="3" disabled><el-icon><document /></el-icon><span>Navigator Three</span></el-menu-item><el-menu-item index="4"><el-icon><setting /></el-icon><span>Navigator Four</span></el-menu-item></el-menu></el-aside>
</template><script setup></script><style lang="less" scoped>
.icons{width:18px;height:18px;margin-right:5px;
}
.el-menu{border-right:none;h3{line-height:48px;color:#fff;text-align:center;}
}
.el-aside{height:100%;background-color:#545c64;
}
</style>

然后在Main.vue中引入我们写的CommonAside.vue组件：

<script setup>
import CommonAside from '@/components/CommonAside.vue'
</script>

运行，浏览器显示：

成功！

从示例代码中可以看出：

el-menu-item表示没有子菜单栏。

        <el-menu-item index="2"><el-icon><icon-menu /></el-icon> <span>Navigator Two</span></el-menu-item>

el-sub-menu表示有子菜单栏，子菜单栏写在父菜单栏里面。

          <el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu>

通过 el-menu-item-group 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定，也可以通过具名 slot 来设定。

        <el-menu-item-group title="Group One"><el-menu-item index="1-1">item one</el-menu-item><el-menu-item index="1-2">item two</el-menu-item></el-menu-item-group>

修改以上代码，编写我们自己的菜单栏:

将我们的菜单写成一个列表，然后菜单栏根据列表项有无子孩子来遍历生成最终的菜单栏，在CommonAside.vue中的script写入：

<script setup>
import {ref,computed} from 'vue'
const list =ref([{path: '/home',name: 'home',label: '首页',icon: 'house',url: 'Home'},{path: '/mall',name: 'mall',label: '商品管理',icon: 'video-play',url: 'Mall'},{path: '/user',name: 'user',label: '用户管理',icon: 'user',url: 'User'},{path: 'other',label: '其他',icon: 'location',children: [{path: '/page1',name: 'page1',label: '页面1',icon: 'setting',url: 'Page1'},{path: '/page2',name: 'page2',label: '页面2',icon: 'setting',url: 'Page2'}]}
])
const noChildren = computed(() => list.value.filter(item => !item.children))
const hasChildren =computed(() => list.value.filter(item => item.children))
</script>

然后修改CommonAside.vue中的template：

第一步，写好大体框架，先是没有子菜单的，然后是有子菜单的：

<template><!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>，我们将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件 --><el-aside width="200px" class="el-aside"><el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo" default-active="2"text-color="#fff" @open="handleOpen" @close="handleClose"><!-- 没有子菜单的 --><el-menu-item index="2"><el-icon><icon-menu /></el-icon><span>Navigator Two</span></el-menu-item><!-- 有子菜单的 --><el-sub-menu index="1-4"><template #title>item four</template><el-menu-item index="1-4-1">item one</el-menu-item></el-sub-menu></el-menu></el-aside>
</template>

继续修改，使用v-for遍历，实现菜单栏的显示效果：

<template><!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>，我们将侧边栏改成我们自定义的组件，通过common-aside引入我们自己写的组件 --><el-aside width="200px" class="el-aside"><el-menu background-color="#545c64" text-color="#fff"><!-- 写菜单栏的大标题————通用后台管理系统 --><h3>通用后台管理系统</h3><!-- 循环遍历菜单栏 --><!-- 1.没有子菜单的遍历 --><el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path"><!-- <el-icon><icon-menu /></el-icon> --><!-- 动态获取icon图标 --><component :is="item.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ item.label }}</span></el-menu-item><!-- 2.有子菜单的遍历 --><el-sub-menu v-for="item in hasChildren" :key="item.path" :index="item.path"><template #title><!-- 动态获取icon图标 --><component :is="item.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ item.label }}</span></template><!-- 分组 --><el-menu-item-group><!-- 循环遍历子菜单 --><el-menu-item v-for="child in item.children" :key="child.path" :index="child.path"><!-- 动态获取icon图标 --><component :is="child.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ child.label }}</span>></el-menu-item></el-menu-item-group></el-sub-menu></el-menu></el-aside>
</template>

显示效果：

完成！

5.编写我们自己的页面Header

新建src\components\CommonHeader.vue文件。

在Main.vue中引入CommonHeader.vue:

<script setup>
import CommonAside from '@/components/CommonAside.vue'
import CommonHeader from '@/components/CommonHeader.vue'
</script>

编写CommonHeader.vue文件，在header的最左边显示菜单按钮（以后为其添加功能：点击此按钮会显示/隐藏左侧菜单栏）：

<template><div class="header"><!-- 左侧点击四个点的Menu按钮具有折叠菜单栏的功能，右侧user的头像，头像有下栏菜单 --><div class="l-content"><el-button size="small"><component class="icons" is="menu"></component></el-button></div><div class="r-content"></div></div>
</template>

效果：

复制Breadcrumb 面包屑 | Element Plus面包屑代码在button下，并做修改：

<template><div class="header"><!-- 左侧点击四个点的Menu按钮具有折叠菜单栏的功能，右侧user的头像，头像有下栏菜单 --><div class="l-content"><el-button size="small"><component class="icons" is="menu"></component></el-button><el-breadcrumb separator="/" class="bread"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item></el-breadcrumb></div><div class="r-content"></div></div>
</template><script setup>
</script><style lang="less" scoped>
.header {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;background-color: #333;
}.icons {width: 20px;height: 20px;}.l-content {display: flex;align-items: center;.el-button {margin-right: 20px;}
}.r-content {.user {width: 40px;height: 40px;border-radius: 50%;}
}:deep(.bread span) {color: #fff !important;cursor: pointer !important;
}
</style>

显示效果：

继续编写header的右侧下拉菜单：

复制Dropdown 下拉菜单 | Element Plus代码到<div class="r-content"></div>内部，并做修改：

<template><div class="header"><!-- 左侧点击四个点的Menu按钮具有折叠菜单栏的功能，右侧user的头像，头像有下栏菜单 --><div class="l-content"><el-button size="small"><component class="icons" is="menu"></component></el-button><el-breadcrumb separator="/" class="bread"><el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item></el-breadcrumb></div><div class="r-content"> <el-dropdown><span class="el-dropdown-link"><!-- Dropdown List<el-icon class="el-icon--right"><arrow-down /></el-icon> --><!-- 将此部分内容换成我们要显示的用户头像图片（my-vue-project\src\assets\images\user.png） --><img :src="getImageUrl('user')" alt="用户头像" class="user" /></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></div>
</template><script setup>
import { ref, computed } from 'vue'
// 通过参数user的名字可以获取动态的图片的url
// 通过new URL()方法可以创建并返回一个URL对象,用来获取图片的url（百度new URL MDN）
// 通过import.meta.url可以获取当前模块的url
const getImageUrl = (user) => {return new URL(`../assets/images/${user}.png`, import.meta.url).href
}
</script><style lang="less" scoped>
.header {display: flex;justify-content: space-between;align-items: center;width: 100%;height: 100%;background-color: #333;
}.icons {width: 20px;height: 20px;}.l-content {display: flex;align-items: center;.el-button {margin-right: 20px;}
}.r-content {.user {width: 40px;height: 40px;border-radius: 50%;}
}:deep(.bread span) {color: #fff !important;cursor: pointer !important;
}
</style>

效果：

完成！