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><!-- 写菜单栏的大标题————通用后台管理系统 --><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>

显示效果：

完成！